/* ==========================================================================
   Helpdesk Design System — Tokens
   Визуальный язык: flat, острые углы, тонкие границы вместо теней,
   бренд-градиент magenta → red → yellow, красно-оранжевый акцент.
   ========================================================================== */

:root {
  /* --- Палитра: нейтрали -------------------------------------------------- */
  --c-black:      #000000;
  --c-ink-900:    #101010;
  --c-ink-800:    #202020;  /* основной текст */
  --c-ink-700:    #333333;
  --c-ink-600:    #4a4a4a;
  --c-ink-500:    #646464;  /* вторичный текст */
  --c-ink-400:    #838383;  /* приглушённый текст, плейсхолдеры */
  --c-ink-300:    #b4b4b4;
  --c-ink-200:    #e0e0e0;  /* границы */
  --c-ink-150:    #e8e8e8;  /* заливка hover, разделители блоков */
  --c-ink-100:    #f1f1f1;
  --c-ink-50:     #f7f7f7;
  --c-ink-25:     #fcfcfc;
  --c-white:      #ffffff;

  /* --- Палитра: бренд ----------------------------------------------------- */
  --c-magenta:    #ff6bfc;
  --c-violet:     #e54fe2;
  --c-red:        #ea2804;  /* главный акцент */
  --c-red-dark:   #c02003;
  --c-coral:      #f97e82;
  --c-amber:      #e36209;
  --c-yellow:     #f6f47f;
  --c-ochre:      #997000;
  --c-green:      #4f986a;
  --c-crimson:    #d73a49;

  /* --- Семантика: поверхности --------------------------------------------- */
  --bg-canvas:      var(--c-white);
  --bg-surface:     var(--c-white);
  --bg-subtle:      var(--c-ink-50);
  --bg-muted:       var(--c-ink-150);
  --bg-inverse:     var(--c-ink-800);
  --bg-code:        var(--c-ink-25);
  --bg-overlay:     rgba(16, 16, 16, 0.55);

  /* --- Семантика: текст ---------------------------------------------------- */
  --fg-primary:     var(--c-ink-800);
  --fg-secondary:   var(--c-ink-500);
  --fg-muted:       var(--c-ink-400);
  --fg-inverse:     var(--c-white);
  --fg-accent:      var(--c-red);
  --fg-link:        var(--c-red);

  /* --- Семантика: плотные контролы (primary-кнопка, активный чип, solid-бейдж) */
  --ctl-solid-bg:       var(--c-ink-800);
  --ctl-solid-bg-hover: var(--c-black);
  --ctl-solid-fg:       var(--c-white);
  --ctl-solid-fg-muted: rgba(255, 255, 255, .6);

  /* --- Семантика: границы -------------------------------------------------- */
  --bd-default:     var(--c-ink-200);
  --bd-strong:      var(--c-ink-800);
  --bd-subtle:      var(--c-ink-150);
  --bd-accent:      var(--c-red);
  --bd-focus:       var(--c-ink-800);

  /* --- Семантика: статусы -------------------------------------------------- */
  --st-success:     var(--c-green);
  --st-success-bg:  #eaf4ee;
  --st-warning:     var(--c-ochre);
  --st-warning-bg:  #fbf3dd;
  --st-danger:      var(--c-crimson);
  --st-danger-bg:   #fdecee;
  --st-accent-bg:   #fdeae5;
  --st-info:        var(--c-violet);
  --st-info-bg:     #fdeafc;
  --st-neutral:     var(--c-ink-500);
  --st-neutral-bg:  var(--c-ink-100);

  /* --- Приоритеты тикета --------------------------------------------------- */
  --pri-urgent:     var(--c-red);
  --pri-high:       var(--c-amber);
  --pri-normal:     var(--c-ink-600);
  --pri-low:        var(--c-ink-400);

  /* --- Градиенты ----------------------------------------------------------- */
  --grad-brand:     linear-gradient(to bottom right, #ff6bfc, #ea2804, #f6f47f);
  --grad-hot:       linear-gradient(to bottom right, #ff6bfc, #e54fe2, #ea2804);
  --grad-soft:      linear-gradient(to bottom right, #ff6bfc, #ea2804, #f97e82);
  --grad-fade:      linear-gradient(rgba(234, 40, 4, 0.5), #ffffff);
  --grad-veil:      radial-gradient(75% 100% at 50% 0%, rgba(255,255,255,.4) 0%, rgba(255,255,255,.4) 50%, rgba(255,255,255,0) 100%);

  /* --- Типографика --------------------------------------------------------- */
  --ff-display: "Space Grotesk", "Freigeist Neue", ui-sans-serif, system-ui, sans-serif;
  --ff-body:    "Inter", "Basier Square", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --ff-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-display-xl: 72px;
  --fs-display-lg: 56px;
  --fs-display-md: 40px;
  --fs-h1: 32px;
  --fs-h2: 24px;
  --fs-h3: 20px;
  --fs-h4: 18px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 12px;
  --fs-2xs: 11px;

  --lh-tight: 1.0;
  --lh-snug: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  --ls-display: -0.025em;  /* -1.8px на 72px */
  --ls-heading: -0.015em;
  --ls-normal: 0;
  --ls-caps: 0.08em;

  /* --- Отступы (шаг 4px) ---------------------------------------------------- */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* --- Скругления: система острая, скругление только у pill ----------------- */
  --r-none: 0;
  --r-xs: 2px;
  --r-sm: 3px;
  --r-pill: 999px;
  --r-circle: 50%;

  /* --- Границы -------------------------------------------------------------- */
  --bw-hair: 1px;
  --bw-thick: 2px;

  /* --- Тени (используются скупо) -------------------------------------------- */
  --sh-none: none;
  --sh-sm: 0 1px 2px rgba(16, 16, 16, .06);
  --sh-md: 0 4px 12px rgba(16, 16, 16, .08);
  --sh-pop: 0 8px 28px rgba(16, 16, 16, .12);
  --sh-hard: 4px 4px 0 var(--c-ink-800);
  --sh-hard-accent: 4px 4px 0 var(--c-red);

  /* --- Анимация -------------------------------------------------------------- */
  --dur-fast: 100ms;
  --dur-base: 160ms;
  --dur-slow: 280ms;
  --ease: cubic-bezier(.2, 0, .2, 1);

  /* --- Слои ----------------------------------------------------------------- */
  --z-base: 0;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* --- Раскладка ------------------------------------------------------------ */
  --layout-max: 1280px;
  --layout-gutter: var(--sp-6);
  --sidebar-w: 264px;
  --topbar-h: 60px;
}

/* ==========================================================================
   Тёмная тема — переопределяем только семантику, палитра неизменна
   ========================================================================== */

:root[data-theme="dark"] {
  --bg-canvas:      #141414;
  --bg-surface:     #1c1c1c;
  --bg-subtle:      #232323;
  --bg-muted:       #2c2c2c;
  --bg-inverse:     var(--c-ink-25);
  --bg-code:        #191919;
  --bg-overlay:     rgba(0, 0, 0, .65);

  --fg-primary:     #ededed;
  --fg-secondary:   #a6a6a6;
  --fg-muted:       #7a7a7a;
  --fg-inverse:     var(--c-ink-900);
  --fg-accent:      #ff6a45;
  --fg-link:        #ff6a45;

  --ctl-solid-bg:       #ededed;
  --ctl-solid-bg-hover: #ffffff;
  --ctl-solid-fg:       #141414;
  --ctl-solid-fg-muted: rgba(0, 0, 0, .55);

  --bd-default:     #333333;
  --bd-strong:      #5a5a5a;
  --bd-subtle:      #292929;
  --bd-accent:      #ff6a45;
  --bd-focus:       #ededed;

  --st-success-bg:  #16281d;
  --st-warning-bg:  #2a2110;
  --st-danger-bg:   #2c1417;
  --st-accent-bg:   #2c1410;
  --st-info-bg:     #2a132a;
  --st-neutral-bg:  #262626;

  /* Приоритеты: серые из светлой темы на тёмном фоне нечитаемы (1.6:1) */
  --pri-normal:     #a6a6a6;
  --pri-low:        #8a8a8a;

  --sh-hard: 4px 4px 0 #000000;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-canvas:      #141414;
    --bg-surface:     #1c1c1c;
    --bg-subtle:      #232323;
    --bg-muted:       #2c2c2c;
    --bg-inverse:     var(--c-ink-25);
    --bg-code:        #191919;
    --bg-overlay:     rgba(0, 0, 0, .65);

    --fg-primary:     #ededed;
    --fg-secondary:   #a6a6a6;
    --fg-muted:       #7a7a7a;
    --fg-inverse:     var(--c-ink-900);
    --fg-accent:      #ff6a45;
    --fg-link:        #ff6a45;

    --ctl-solid-bg:       #ededed;
    --ctl-solid-bg-hover: #ffffff;
    --ctl-solid-fg:       #141414;
    --ctl-solid-fg-muted: rgba(0, 0, 0, .55);

  --bd-default:     #333333;
    --bd-strong:      #5a5a5a;
    --bd-subtle:      #292929;
    --bd-accent:      #ff6a45;
    --bd-focus:       #ededed;

    --st-success-bg:  #16281d;
    --st-warning-bg:  #2a2110;
    --st-danger-bg:   #2c1417;
    --st-accent-bg:   #2c1410;
    --st-info-bg:     #2a132a;
    --st-neutral-bg:  #262626;

    /* Приоритеты: серые из светлой темы на тёмном фоне нечитаемы (1.6:1) */
  --pri-normal:     #a6a6a6;
  --pri-low:        #8a8a8a;

  --sh-hard: 4px 4px 0 #000000;
  }
}