/* Копия giremrus-design/tokens.css (v0.1). Обновлять копированием; портал от общей папки не зависит. */
/*
 * GiremRus Design Tokens v0.1 (2026-11-07)
 * Один файл токенов для всех шести продуктов. Подключается ПЕРЕД стилями продукта;
 * существующие переменные продуктов не удаляются — маппинг в GIREMRUS_DESIGN_SYSTEM.md.
 *
 * Тема:    <html data-theme="light|dark">   (по умолчанию следует за системой)
 * Продукт: <html data-product="os|memory|delo|travel|emri|agentum">
 * Контраст: --gr-accent-btn с белым текстом ≥ 4.5:1 (проверено расчётом).
 */
:root {
  /* ── Типографика ── */
  --gr-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gr-font-display: var(--gr-font-sans);
  --gr-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --gr-fs-xs: 12px;  --gr-fs-sm: 14px;  --gr-fs-md: 16px;
  --gr-fs-lg: 18px;  --gr-fs-xl: 22px;  --gr-fs-2xl: 28px;  --gr-fs-3xl: 36px;  --gr-fs-4xl: 48px;
  --gr-lh-tight: 1.2;  --gr-lh-base: 1.5;
  --gr-fw-regular: 400;  --gr-fw-medium: 500;  --gr-fw-semibold: 600;  --gr-fw-bold: 700;

  /* ── Сетка и отступы (шаг 4 px) ── */
  --gr-sp-1: 4px;  --gr-sp-2: 8px;  --gr-sp-3: 12px;  --gr-sp-4: 16px;
  --gr-sp-5: 24px; --gr-sp-6: 32px; --gr-sp-7: 48px;   --gr-sp-8: 64px;
  --gr-gutter: 16px;            /* мобильный отступ от края */
  --gr-container: 1200px;       /* максимальная ширина контента на ПК */
  --gr-bp-sm: 480px; --gr-bp-md: 768px; --gr-bp-lg: 1024px; --gr-bp-xl: 1280px;
  --gr-touch: 44px;             /* минимальная область нажатия */

  /* ── Радиусы, тени, анимация ── */
  --gr-r-sm: 8px; --gr-r-md: 12px; --gr-r-lg: 16px; --gr-r-xl: 20px; --gr-r-pill: 999px;
  --gr-shadow-sm: 0 1px 2px rgb(15 23 42 / .06);
  --gr-shadow-md: 0 4px 16px rgb(15 23 42 / .10);
  --gr-shadow-lg: 0 18px 40px -20px rgb(15 23 42 / .35);
  --gr-ease: cubic-bezier(.2, .7, .2, 1);
  --gr-dur-1: 120ms; --gr-dur-2: 200ms; --gr-dur-3: 320ms;
  --gr-z-nav: 100; --gr-z-sheet: 200; --gr-z-modal: 300; --gr-z-toast: 400;

  /* ── Семантические цвета (одинаковы во всех продуктах) ── */
  --gr-success: #15803d; --gr-success-soft: rgb(21 128 61 / .12);
  --gr-warning: #b45309; --gr-warning-soft: rgb(180 83 9 / .12);
  --gr-danger:  #dc2626; --gr-danger-soft:  rgb(220 38 38 / .12);
  --gr-info:    #2563eb; --gr-info-soft:    rgb(37 99 235 / .12);

  /* ── Светлая тема (по умолчанию) ── */
  --gr-bg: #f6f7fb;
  --gr-surface: #ffffff;
  --gr-surface-2: #eef1f7;
  --gr-border: #e2e7f0;
  --gr-text: #0f172a;
  --gr-text-muted: #5b6578;     /* 5.5:1 на --gr-bg */
  --gr-focus: #2563eb;

  /* ── Акцент по умолчанию (бренд GiremRus) ── */
  --gr-accent: #2563eb;
  --gr-accent-btn: #2563eb;     /* заливка кнопки, белый текст 5.2:1 */
  --gr-accent-soft: rgb(37 99 235 / .10);
  --gr-on-accent: #ffffff;
  --gr-gradient: linear-gradient(135deg, #2563eb 0%, #6c5cff 100%);
}

/* Тёмная тема: явная или по системе, если не выбрана светлая */
:root[data-theme="dark"] {
  --gr-bg: #121826;  --gr-surface: #1b2433;  --gr-surface-2: #202b3c;
  --gr-border: #313d54;  --gr-text: #f5f7fa;  --gr-text-muted: #97a0c8;  /* 6.9:1 */
  --gr-shadow-md: 0 4px 16px rgb(0 0 0 / .35);
  --gr-shadow-lg: 0 18px 40px -20px rgb(0 0 0 / .7);
  --gr-success: #4ade80; --gr-warning: #fbbf24; --gr-danger: #f87171; --gr-info: #60a5fa;
  --gr-focus: #93c5fd;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --gr-bg: #121826;  --gr-surface: #1b2433;  --gr-surface-2: #202b3c;
    --gr-border: #313d54;  --gr-text: #f5f7fa;  --gr-text-muted: #97a0c8;
    --gr-shadow-md: 0 4px 16px rgb(0 0 0 / .35);
    --gr-shadow-lg: 0 18px 40px -20px rgb(0 0 0 / .7);
    --gr-success: #4ade80; --gr-warning: #fbbf24; --gr-danger: #f87171; --gr-info: #60a5fa;
    --gr-focus: #93c5fd;
  }
}

/* ── Индивидуальность продуктов: меняются только акцент, градиент и характер ── */
:root[data-product="os"] {        /* GIREM OS — корпоративный синий, плотные таблицы */
  --gr-accent: #3b82f6; --gr-accent-btn: #2563eb; --gr-accent-soft: rgb(59 130 246 / .12);
  --gr-gradient: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%);
  --gr-r-md: 10px; --gr-r-lg: 12px;
}
:root[data-product="memory"] {    /* MEMORY AI — спокойный индиго, воздух и крупный текст */
  --gr-accent: #6366f1; --gr-accent-btn: #4f46e5; --gr-accent-soft: rgb(99 102 241 / .12);
  --gr-gradient: linear-gradient(135deg, #4f46e5 0%, #a78bfa 100%);
  --gr-r-md: 14px; --gr-r-lg: 18px;
}
:root[data-product="delo"] {      /* DELO — тёмный фиолетовый «рабочий стол», как сейчас */
  --gr-accent: #6c5cff; --gr-accent-btn: #5b4bee; --gr-accent-soft: rgb(108 92 255 / .16);
  --gr-gradient: linear-gradient(135deg, #6c5cff 0%, #9b5cff 100%);
  --gr-r-md: 14px; --gr-r-lg: 20px;
}
:root[data-product="travel"] {    /* TRAVEL — морская бирюза и тёплый «закат» для цены */
  --gr-accent: #14b8b0; --gr-accent-btn: #0b7c79; --gr-accent-soft: rgb(20 184 176 / .14);
  --gr-gradient: linear-gradient(135deg, #0b7c79 0%, #ff8a4c 100%);
  --gr-r-md: 14px; --gr-r-lg: 20px;
}
:root[data-product="emri"] {      /* EMRI — космос и золото; тёмный текст на золоте */
  --gr-font-display: "Unbounded", var(--gr-font-sans);
  --gr-accent: #ffc95c; --gr-accent-btn: #ffc95c; --gr-on-accent: #1b1648;
  --gr-accent-soft: rgb(255 201 92 / .16);
  --gr-gradient: linear-gradient(135deg, #7fe7ff 0%, #b79cff 55%, #ffc95c 100%);
  --gr-bg: #0d0b26; --gr-surface: rgb(40 32 92 / .58); --gr-surface-2: rgb(62 48 128 / .55);
  --gr-border: rgb(255 255 255 / .12); --gr-text: #f4f0ff; --gr-text-muted: #c7bfeb;
  --gr-r-md: 14px; --gr-r-lg: 20px;
}
:root[data-product="agentum"] {   /* AGENTUM — графит и изумруд, витрина-маркетплейс */
  --gr-accent: #10b981; --gr-accent-btn: #087a55; --gr-accent-soft: rgb(16 185 129 / .12);
  --gr-gradient: linear-gradient(135deg, #087a55 0%, #38bdf8 100%);
  --gr-r-md: 12px; --gr-r-lg: 16px;
}

/* ── Базовые правила доступности ── */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--gr-focus); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  :root { --gr-dur-1: 0ms; --gr-dur-2: 0ms; --gr-dur-3: 0ms; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
