/* ==========================================================================
   root.css — Design Tokens & Base Styles
   CRM Project | Single Source of Truth для всех визуальных переменных
   Версия: 1.0 | Дата: 2026-09-18
   ========================================================================== */

/* ==========================================================================
   §1. RAW PALETTE (Сырая палитра)
   Мягкие пастельные тона: sage green + seafoam blue
   ========================================================================== */

:root {
    /* --- Sage Green (Primary) — спокойный зелёный с серым подтоном --- */
    --palette-sage-50:  #f2f7f5;
    --palette-sage-100: #e1ede8;
    --palette-sage-200: #c3dbd1;
    --palette-sage-300: #9ec3b4;
    --palette-sage-400: #79baa0;  /* основной зелёный из login */
    --palette-sage-500: #5fa88a;
    --palette-sage-600: #4a8c72;
    --palette-sage-700: #3d715d;
    --palette-sage-800: #335b4b;
    --palette-sage-900: #2b4a3e;

    /* --- Seafoam Blue (Accent) — мягкий сине-зелёный --- */
    --palette-sea-50:  #f0f7f9;
    --palette-sea-100: #dceef3;
    --palette-sea-200: #b8dbe5;
    --palette-sea-300: #8ac2d2;
    --palette-sea-400: #68b6c9;
    --palette-sea-500: #50aec1;  /* основной синий из login */
    --palette-sea-600: #4295a7;
    --palette-sea-700: #387a89;
    --palette-sea-800: #31636f;
    --palette-sea-900: #2b515c;

    /* --- Warm Sand (нейтральный тёплый) — для фонов --- */
    --palette-sand-50:  #fafaf7;
    --palette-sand-100: #f3f2ee;
    --palette-sand-200: #e8e6df;
    --palette-sand-300: #d4d1c6;
    --palette-sand-400: #b5b1a3;
    --palette-sand-500: #969183;
    --palette-sand-600: #787368;
    --palette-sand-700: #5f5b52;
    --palette-sand-800: #4a4740;
    --palette-sand-900: #3a3833;
    --palette-sand-950: #1f1e1b;

    /* --- Soft Red (для ошибок, но приглушённый) --- */
    --palette-rose-50:  #fdf4f3;
    --palette-rose-100: #fbe6e3;
    --palette-rose-200: #f7cfca;
    --palette-rose-300: #f0aba3;
    --palette-rose-400: #e58177;
    --palette-rose-500: #d4625a;
    --palette-rose-600: #b84b44;
    --palette-rose-700: #9b3e38;
    --palette-rose-800: #813732;
    --palette-rose-900: #6c322e;

    /* --- Soft Amber (для предупреждений) --- */
    --palette-amber-50:  #fdf9ef;
    --palette-amber-100: #f9efd3;
    --palette-amber-200: #f2dda5;
    --palette-amber-300: #e9c56f;
    --palette-amber-400: #e0ac45;
    --palette-amber-500: #d4932c;
    --palette-amber-600: #bc7722;
    --palette-amber-700: #9c5b1e;
    --palette-amber-800: #7f491f;
    --palette-amber-900: #693d1d;

    /* --- Pure --- */
    --palette-white: #ffffff;
    --palette-black: #000000;
}


/* ==========================================================================
   §2. SEMANTIC TOKENS — LIGHT THEME (по умолчанию)
   Мягкая пастельная тема
   ========================================================================== */

:root {
    /* --- Surfaces (Фоны) — тёплые, мягкие --- */
    --color-bg-primary:      var(--palette-sand-50);
    --color-bg-secondary:    var(--palette-white);
    --color-bg-tertiary:     var(--palette-sand-100);
    --color-bg-sidebar:      #2f3d3a;        /* тёмный тёплый графит с зелёным подтоном */
    --color-bg-header:       var(--palette-white);
    --color-bg-card:         var(--palette-white);
    --color-bg-input:        var(--palette-white);
    --color-bg-hover:        var(--palette-sage-50);
    --color-bg-active:       var(--palette-sea-50);
    --color-bg-overlay:      rgba(43, 51, 49, 0.45);

    /* --- Text (Текст) — приглушённый, не чёрный --- */
    --color-text-primary:    var(--palette-sand-900);
    --color-text-secondary:  var(--palette-sand-600);
    --color-text-tertiary:   var(--palette-sand-400);
    --color-text-inverse:    var(--palette-white);
    --color-text-link:       var(--palette-sea-600);
    --color-text-link-hover: var(--palette-sea-700);
    --color-text-on-primary: var(--palette-white);
    --color-text-sidebar:    rgba(255, 255, 255, 0.65);
    --color-text-sidebar-active: var(--palette-white);

    /* --- Borders (Границы) — мягкие, почти невидимые --- */
    --color-border-default:  var(--palette-sand-200);
    --color-border-strong:   var(--palette-sand-300);
    --color-border-subtle:   var(--palette-sand-100);
    --color-border-focus:    var(--palette-sea-400);
    --color-border-error:    var(--palette-rose-400);
    --color-border-success:  var(--palette-sage-400);

    /* --- Brand / Interactive --- */
    --color-brand-primary:       var(--palette-sea-500);   /* #50aec1 */
    --color-brand-primary-hover: var(--palette-sea-600);   /* #4295a7 */
    --color-brand-primary-light: var(--palette-sea-50);    /* мягкий фон */
    --color-brand-accent:        var(--palette-sage-400);  /* #79baa0 */
    --color-brand-accent-hover:  var(--palette-sage-500);  /* #5fa88a */

    /* --- Status (приглушённые) --- */
    --color-status-success:      var(--palette-sage-500);
    --color-status-success-bg:   var(--palette-sage-50);
    --color-status-warning:      var(--palette-amber-500);
    --color-status-warning-bg:   var(--palette-amber-50);
    --color-status-error:        var(--palette-rose-500);
    --color-status-error-bg:     var(--palette-rose-50);
    --color-status-info:         var(--palette-sea-500);
    --color-status-info-bg:      var(--palette-sea-50);

    /* --- Kanban Column Accents (пастельные) --- */
    --color-kanban-todo:     var(--palette-sand-400);
    --color-kanban-progress: var(--palette-amber-300);
    --color-kanban-review:   var(--palette-sea-400);
    --color-kanban-done:     var(--palette-sage-400);
}


/* ==========================================================================
   §3. SEMANTIC TOKENS — DARK THEME
   Тёплая тёмная тема (не холодная, как раньше)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    :root:not(.theme-light) {
        --color-bg-primary:      var(--palette-sand-950);
        --color-bg-secondary:    var(--palette-sand-900);
        --color-bg-tertiary:     var(--palette-sand-800);
        --color-bg-sidebar:      #1f2926;
        --color-bg-header:       var(--palette-sand-900);
        --color-bg-card:         var(--palette-sand-800);
        --color-bg-input:        var(--palette-sand-800);
        --color-bg-hover:        var(--palette-sand-800);
        --color-bg-active:       var(--palette-sea-900);
        --color-bg-overlay:      rgba(0, 0, 0, 0.6);

        --color-text-primary:    var(--palette-sand-100);
        --color-text-secondary:  var(--palette-sand-400);
        --color-text-tertiary:   var(--palette-sand-500);
        --color-text-inverse:    var(--palette-sand-900);
        --color-text-link:       var(--palette-sea-300);
        --color-text-link-hover: var(--palette-sea-200);
        --color-text-on-primary: var(--palette-white);
        --color-text-sidebar:    rgba(255, 255, 255, 0.55);
        --color-text-sidebar-active: var(--palette-white);

        --color-border-default:  var(--palette-sand-700);
        --color-border-strong:   var(--palette-sand-600);
        --color-border-subtle:   var(--palette-sand-800);
        --color-border-focus:    var(--palette-sea-400);
        --color-border-error:    var(--palette-rose-400);
        --color-border-success:  var(--palette-sage-400);

        --color-brand-primary:       var(--palette-sea-400);
        --color-brand-primary-hover: var(--palette-sea-300);
        --color-brand-primary-light: var(--palette-sea-900);
        --color-brand-accent:        var(--palette-sage-400);
        --color-brand-accent-hover:  var(--palette-sage-300);

        --color-status-success:      var(--palette-sage-400);
        --color-status-success-bg:   var(--palette-sage-900);
        --color-status-warning:      var(--palette-amber-400);
        --color-status-warning-bg:   var(--palette-amber-900);
        --color-status-error:        var(--palette-rose-400);
        --color-status-error-bg:     var(--palette-rose-900);
        --color-status-info:         var(--palette-sea-400);
        --color-status-info-bg:      var(--palette-sea-900);
    }
}

/* Ручное переключение через JS */
html.theme-dark {
    --color-bg-primary:      var(--palette-sand-950);
    --color-bg-secondary:    var(--palette-sand-900);
    --color-bg-tertiary:     var(--palette-sand-800);
    --color-bg-sidebar:      #1f2926;
    --color-bg-header:       var(--palette-sand-900);
    --color-bg-card:         var(--palette-sand-800);
    --color-bg-input:        var(--palette-sand-800);
    --color-bg-hover:        var(--palette-sand-800);
    --color-bg-active:       var(--palette-sea-900);
    --color-bg-overlay:      rgba(0, 0, 0, 0.6);

    --color-text-primary:    var(--palette-sand-100);
    --color-text-secondary:  var(--palette-sand-400);
    --color-text-tertiary:   var(--palette-sand-500);
    --color-text-inverse:    var(--palette-sand-900);
    --color-text-link:       var(--palette-sea-300);
    --color-text-link-hover: var(--palette-sea-200);
    --color-text-on-primary: var(--palette-white);
    --color-text-sidebar:    rgba(255, 255, 255, 0.55);
    --color-text-sidebar-active: var(--palette-white);

    --color-border-default:  var(--palette-sand-700);
    --color-border-strong:   var(--palette-sand-600);
    --color-border-subtle:   var(--palette-sand-800);
    --color-border-focus:    var(--palette-sea-400);
    --color-border-error:    var(--palette-rose-400);
    --color-border-success:  var(--palette-sage-400);

    --color-brand-primary:       var(--palette-sea-400);
    --color-brand-primary-hover: var(--palette-sea-300);
    --color-brand-primary-light: var(--palette-sea-900);
    --color-brand-accent:        var(--palette-sage-400);
    --color-brand-accent-hover:  var(--palette-sage-300);

    --color-status-success:      var(--palette-sage-400);
    --color-status-success-bg:   var(--palette-sage-900);
    --color-status-warning:      var(--palette-amber-400);
    --color-status-warning-bg:   var(--palette-amber-900);
    --color-status-error:        var(--palette-rose-400);
    --color-status-error-bg:     var(--palette-rose-900);
    --color-status-info:         var(--palette-sea-400);
    --color-status-info-bg:      var(--palette-sea-900);
}


/* ==========================================================================
   §4. SPACING — 8pt Grid Scale
   Все отступы и размеры кратны 8px (4px для микро-элементов).
   ========================================================================== */

:root {
    --space-2xs: 2px;   /* микро-коррекции */
    --space-xs:  4px;   /* микро-отступы */
    --space-sm:  8px;   /* базовый минимальный */
    --space-md:  16px;  /* стандартный */
    --space-lg:  24px;  /* увеличенный */
    --space-xl:  32px;  /* секционный */
    --space-2xl: 48px;  /* крупный секционный */
    --space-3xl: 64px;  /* героический */
    --space-4xl: 96px;  /* макетный */

    /* Sidebar & Header fixed sizes */
    --sidebar-width:         256px;
    --sidebar-width-collapsed: 64px;
    --header-height:         56px;
}


/* ==========================================================================
   §5. TYPOGRAPHY — Fluid & Semantic
   clamp() для плавного масштабирования без брейкпоинт-скачков.
   ========================================================================== */

:root {
    /* --- Font Families --- */
    --font-family-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                         Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --font-family-mono:  'JetBrains Mono', 'Fira Code', 'Cascadia Code',
                         Consolas, monospace;

    /* --- Base --- */
    --font-size-base:    clamp(0.875rem, 0.85rem + 0.15vw, 1rem);     /* 14–16px */
    --line-height-base:  1.6;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold:   700;
    --letter-spacing-normal: 0;
    --letter-spacing-tight:  -0.01em;
    --letter-spacing-wide:    0.025em;

    /* --- Headings (Fluid) --- */
    --font-size-h1:    clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);       /* 28–40px */
    --font-size-h2:    clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);    /* 22–30px */
    --font-size-h3:    clamp(1.125rem, 1rem + 0.5vw, 1.5rem);        /* 18–24px */
    --font-size-h4:    clamp(1rem, 0.95rem + 0.25vw, 1.25rem);       /* 16–20px */
    --font-size-h5:    1rem;                                           /* 16px */
    --font-size-h6:    0.875rem;                                       /* 14px */

    --line-height-heading: 1.25;

    /* --- Small / Caption --- */
    --font-size-sm:    0.8125rem;   /* 13px */
    --font-size-xs:    0.75rem;     /* 12px */
    --font-size-2xs:   0.6875rem;   /* 11px */
}


/* ==========================================================================
   §6. ELEVATION — Shadows & Z-Index
   Строгая шкала для избежания «войн за слои».
   ========================================================================== */

:root {
    /* --- Shadows --- */
    --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
    --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.06);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.04);

    /* --- Z-Index Scale --- */
    --z-base:       1;
    --z-dropdown:   100;
    --z-sticky:     200;
    --z-sidebar:    300;
    --z-header:     400;
    --z-modal:      500;
    --z-popover:    600;
    --z-tooltip:    700;
    --z-toast:      900;
    --z-overlay:    1000;
}

/* Dark theme shadow adjustment */
html.theme-dark,
:root:not(.theme-light) {
    --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.35), 0 2px 4px -2px rgba(0, 0, 0, 0.25);
    --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
    --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

@media (prefers-color-scheme: dark) {
    :root:not(.theme-light) {
        --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.2);
        --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
        --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.35), 0 2px 4px -2px rgba(0, 0, 0, 0.25);
        --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
        --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
        --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.2);
    }
}


/* ==========================================================================
   §7. BORDERS & RADIUS
   ========================================================================== */

:root {
    --radius-xs:   4px;
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-full: 9999px;

    --border-width-thin:   1px;
    --border-width-medium: 2px;
    --border-width-thick:  3px;
}


/* ==========================================================================
   §8. ANIMATIONS & TRANSITIONS
   Единые тайминги для консистентности во всех компонентах.
   ========================================================================== */

:root {
    --transition-duration-fast:   120ms;
    --transition-duration-normal: 200ms;
    --transition-duration-slow:   350ms;

    --transition-easing-default:  cubic-bezier(0.4, 0, 0.2, 1);
    --transition-easing-in:       cubic-bezier(0.4, 0, 1, 1);
    --transition-easing-out:      cubic-bezier(0, 0, 0.2, 1);
    --transition-easing-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Готовые шорткаты */
    --transition-fast:   var(--transition-duration-fast) var(--transition-easing-default);
    --transition-normal: var(--transition-duration-normal) var(--transition-easing-default);
    --transition-slow:   var(--transition-duration-slow) var(--transition-easing-default);
}


/* ==========================================================================
   §9. CSS RESET (Modern Normalize)
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    tab-size: 4;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    font-family: var(--font-family-sans);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-base);
    letter-spacing: var(--letter-spacing-normal);
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    overflow-x: hidden;
}

/* --- Headings --- */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-primary);
    text-wrap: balance;
}

h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }
h5 { font-size: var(--font-size-h5); }
h6 { font-size: var(--font-size-h6); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); }

/* --- Links --- */
a {
    color: var(--color-text-link);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-text-link-hover);
    text-decoration: underline;
}

/* --- Lists --- */
ul, ol {
    list-style: none;
}

/* --- Images & Media --- */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* --- Forms --- */
input, button, textarea, select {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    outline: none;
}

button {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

textarea {
    resize: vertical;
}

/* --- Tables --- */
table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

/* --- Misc --- */
hr {
    border: none;
    border-top: var(--border-width-thin) solid var(--color-border-default);
    margin: var(--space-md) 0;
}

::selection {
    background-color: var(--color-brand-primary);
    color: var(--color-text-on-primary);
}

:focus-visible {
    outline: var(--border-width-medium) solid var(--color-border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* Скроллбар (Webkit) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--color-border-strong);
    border-radius: var(--radius-full);
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-text-tertiary);
}