/*
  tokens.css — дизайн-токены AiChat.
  Только переменные: цвета, отступы, радиусы, тени, z-index, длительности.
  Никакой вёрстки и никаких стилей элементов в этом файле — см. base.css/layout.css.

  Светлая тема — полный набор на голом :root.
  Тёмная тема переопределяет ТОЛЬКО изменившиеся токены:
    1) через prefers-color-scheme, если пользователь не выбирал тему явно;
    2) через [data-theme="dark"], если выбрал — этот вариант должен победить
       в обе стороны, поэтому первый блок дополнительно гасится :not([data-theme="light"]).
*/

@layer tokens {
  :root {
    color-scheme: light dark;

    /* ---------- Палитра — светлая тема (роли 60/30/10) ---------- */
    /* 60% — нейтральная база: фон и поверхности */
    --color-bg: #f6f7fb;
    --color-surface: #ffffff;
    --color-surface-raised: #ffffff;
    --color-surface-sunken: #eef0f6;
    --color-border: #d9dce6;
    --color-border-strong: #b9bfd1;

    /* 30% — вторичный поддерживающий (сланцевые нейтрали + текст) */
    --color-text: #1c1e2a;
    --color-text-muted: #565b72;
    --color-text-faint: #666b84;
    --color-text-on-accent: #ffffff;

    /* 10% — акцент (электрик-индиго, затемнён для контраста на белом) */
    --color-accent: #4338ca;
    --color-accent-strong: #372ea8;
    --color-accent-soft: #eceafd;
    --color-accent-ring: rgba(67, 56, 202, 0.45);

    /* Семантические — не совпадают с акцентом */
    --color-success: #157a4a;
    --color-success-soft: #e3f5ec;
    --color-warning: #92600a;
    --color-warning-soft: #fbf0dc;
    --color-danger: #b3261e;
    --color-danger-soft: #fbe9e7;
    --color-info: #0b6bb3;
    --color-info-soft: #e4f1fb;

    /* Роли компонентов (ссылаются на палитру выше — не заводить новых цветов) */
    --color-header-bg: rgba(255, 255, 255, 0.86);
    --color-overlay: rgba(20, 21, 32, 0.48);
    --color-code-bg: #eef0f6;
    --color-code-text: #1c1e2a;
    --color-scrollbar-thumb: rgba(28, 30, 42, 0.28);

    /* ---------- Типографика ---------- */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;

    --fs-xs: 0.8125rem;   /* 13px */
    --fs-sm: 0.875rem;    /* 14px */
    --fs-base: 1rem;      /* 16px */
    --fs-md: 1.0625rem;   /* 17px */
    --fs-lg: 1.25rem;     /* 20px */
    --fs-xl: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
    --fs-2xl: clamp(1.625rem, 1.2rem + 1.8vw, 2.25rem);

    --lh-tight: 1.25;
    --lh-normal: 1.5;
    --lh-relaxed: 1.65;

    /* ---------- Отступы (шкала 4/8) ---------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* ---------- Радиусы ---------- */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* ---------- Тени (светлая тема — обычные мягкие тени) ---------- */
    --shadow-sm: 0 1px 2px rgba(28, 30, 42, 0.08);
    --shadow-md: 0 4px 12px rgba(28, 30, 42, 0.10);
    --shadow-lg: 0 12px 32px rgba(28, 30, 42, 0.14);
    --shadow-focus: 0 0 0 3px var(--color-accent-ring);

    /* ---------- Стекло (glassmorphism) шапки ---------- */
    --glass-blur: blur(14px);
    --glass-border: 1px solid rgba(28, 30, 42, 0.08);

    /* ---------- z-index (фиксированная шкала — не менять произвольно) ---------- */
    --z-dropdown: 100;
    --z-sticky-header: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;

    /* ---------- Длительности и изинги движения ---------- */
    --dur-fast: 150ms;
    --dur-base: 180ms;
    --dur-slow: 300ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    /* ---------- Брейкпоинты (справочно; в @media числа дублируются буквально —
       CSS не позволяет переменные внутри media-запроса) ---------- */
    --bp-mobile: 320px;
    --bp-burger: 480px;
    --bp-tablet: 768px;
    --bp-desktop: 1280px;
    --bp-wide: 1440px;

    /* Ширины контента */
    --content-max: 1100px;
    --thread-max: 820px;
  }

  /* ---------- Тёмная тема — по системным настройкам ---------- */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --color-bg: #0a0a0f;
      --color-surface: #15151d;
      --color-surface-raised: #1b1c27;
      --color-surface-sunken: #0f0f16;
      --color-border: #2b2c3b;
      --color-border-strong: #3d3f54;

      --color-text: #eceef7;
      --color-text-muted: #a7abc4;
      --color-text-faint: #80849e;
      --color-text-on-accent: #ffffff;

      --color-accent: #8b85f4;
      --color-accent-strong: #a7a1ff;
      --color-accent-soft: rgba(139, 133, 244, 0.16);
      --color-accent-ring: rgba(139, 133, 244, 0.55);

      --color-success: #4ade9a;
      --color-success-soft: rgba(74, 222, 154, 0.14);
      --color-warning: #e8b44c;
      --color-warning-soft: rgba(232, 180, 76, 0.14);
      --color-danger: #f2837a;
      --color-danger-soft: rgba(242, 131, 122, 0.14);
      --color-info: #74c1f4;
      --color-info-soft: rgba(116, 193, 244, 0.14);

      --color-header-bg: rgba(21, 21, 29, 0.72);
      --color-overlay: rgba(0, 0, 0, 0.6);
      --color-code-bg: #10101a;
      --color-code-text: #eceef7;
      --color-scrollbar-thumb: rgba(236, 238, 247, 0.22);

      /* Тёмная тема — не инверсия: тени слабее, вместо них — осветление поверхности */
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
      --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
      --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
      --shadow-focus: 0 0 0 3px var(--color-accent-ring);

      --glass-border: 1px solid rgba(236, 238, 247, 0.08);
    }
  }

  /* ---------- Тёмная тема — явный выбор пользователя (побеждает в обе стороны) ---------- */
  :root[data-theme="dark"] {
    --color-bg: #0a0a0f;
    --color-surface: #15151d;
    --color-surface-raised: #1b1c27;
    --color-surface-sunken: #0f0f16;
    --color-border: #2b2c3b;
    --color-border-strong: #3d3f54;

    --color-text: #eceef7;
    --color-text-muted: #a7abc4;
    --color-text-faint: #80849e;
    --color-text-on-accent: #ffffff;

    --color-accent: #8b85f4;
    --color-accent-strong: #a7a1ff;
    --color-accent-soft: rgba(139, 133, 244, 0.16);
    --color-accent-ring: rgba(139, 133, 244, 0.55);

    --color-success: #4ade9a;
    --color-success-soft: rgba(74, 222, 154, 0.14);
    --color-warning: #e8b44c;
    --color-warning-soft: rgba(232, 180, 76, 0.14);
    --color-danger: #f2837a;
    --color-danger-soft: rgba(242, 131, 122, 0.14);
    --color-info: #74c1f4;
    --color-info-soft: rgba(116, 193, 244, 0.14);

    --color-header-bg: rgba(21, 21, 29, 0.72);
    --color-overlay: rgba(0, 0, 0, 0.6);
    --color-code-bg: #10101a;
    --color-code-text: #eceef7;
    --color-scrollbar-thumb: rgba(236, 238, 247, 0.22);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
    --shadow-focus: 0 0 0 3px var(--color-accent-ring);

    --glass-border: 1px solid rgba(236, 238, 247, 0.08);
  }

  /* Тема, выбранная явно как светлая, должна победить system dark — обнуляем варианты выше. */
  :root[data-theme="light"] {
    --color-bg: #f6f7fb;
    --color-surface: #ffffff;
    --color-surface-raised: #ffffff;
    --color-surface-sunken: #eef0f6;
    --color-border: #d9dce6;
    --color-border-strong: #b9bfd1;
    --color-text: #1c1e2a;
    --color-text-muted: #565b72;
    --color-text-faint: #666b84;
    --color-accent: #4338ca;
    --color-accent-strong: #372ea8;
    --color-accent-soft: #eceafd;
    --color-accent-ring: rgba(67, 56, 202, 0.45);
    --color-success: #157a4a;
    --color-success-soft: #e3f5ec;
    --color-warning: #92600a;
    --color-warning-soft: #fbf0dc;
    --color-danger: #b3261e;
    --color-danger-soft: #fbe9e7;
    --color-info: #0b6bb3;
    --color-info-soft: #e4f1fb;
    --color-header-bg: rgba(255, 255, 255, 0.86);
    --color-overlay: rgba(20, 21, 32, 0.48);
    --color-code-bg: #eef0f6;
    --color-code-text: #1c1e2a;
    --color-scrollbar-thumb: rgba(28, 30, 42, 0.28);
    --shadow-sm: 0 1px 2px rgba(28, 30, 42, 0.08);
    --shadow-md: 0 4px 12px rgba(28, 30, 42, 0.10);
    --shadow-lg: 0 12px 32px rgba(28, 30, 42, 0.14);
    --shadow-focus: 0 0 0 3px var(--color-accent-ring);
    --glass-border: 1px solid rgba(28, 30, 42, 0.08);
  }
}