/* ═══════════════════════════════════════════════════════════════
   BLUEPRINT — DESIGN SYSTEM v2.0
   Единый источник правды для всех визуальных решений.
   Подключается ПЕРЕД blueprint.css.

   ПРАВИЛА:
   — Хардкод значений запрещён — только var(--token)
   — Три уровня: Primitive → Semantic → Component
   — Gold только в 3 местах: имя, fp-title, primary CTA
   — @container для компонентов, @media только для глобального лейаута
   — prefers-reduced-motion обёртка для всех анимаций
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   PRIMITIVE TOKENS
   Сырые значения. Не использовать напрямую в компонентах.
   Все в OKLCH — перцептивная равномерность, предсказуемые hover.
───────────────────────────────────────────────────────────────*/
:root {

  /* ── Primitive: цвет фона ───────────────────────────────── */
  --color-bg-0:    oklch(8%  0    0);       /* страница */
  --color-bg-1:    oklch(10% 0.01 260);     /* поверхность 1 */
  --color-bg-2:    oklch(13% 0.01 260);     /* поверхность 2 */
  --color-bg-3:    oklch(16% 0.01 260);     /* поверхность 3 */

  /* ── Primitive: текст ───────────────────────────────────── */
  --color-text-0:  oklch(93% 0    0);       /* основной */
  --color-text-1:  oklch(75% 0    0);       /* вторичный */
  --color-text-2:  oklch(58% 0    0);       /* приглушённый */

  /* ── Primitive: бордеры ─────────────────────────────────── */
  --color-border-0: oklch(100% 0 0 / 7%);  /* тонкий */
  --color-border-1: oklch(100% 0 0 / 12%); /* заметный */
  --color-border-2: oklch(100% 0 0 / 18%); /* акцентный */

  /* ── Primitive: акцент gold ─────────────────────────────── */
  --color-gold:      oklch(72% 0.12 68);            /* #d4a853 */
  --color-gold-hi:   oklch(78% 0.12 68);            /* hover */
  --color-gold-dim:  oklch(72% 0.12 68 / 20%);      /* glow, faint bg */
  --color-gold-4:    oklch(72% 0.12 68 /  4%);
  --color-gold-5:    oklch(72% 0.12 68 /  5%);
  --color-gold-8:    oklch(72% 0.12 68 /  8%);
  --color-gold-10:   oklch(72% 0.12 68 / 10%);
  --color-gold-22:   oklch(72% 0.12 68 / 22%);
  --color-gold-25:   oklch(72% 0.12 68 / 25%);
  --color-gold-30:   oklch(72% 0.12 68 / 30%);
  --color-gold-35:   oklch(72% 0.12 68 / 35%);
  --color-gold-40:   oklch(72% 0.12 68 / 40%);
  --color-gold-45:   oklch(72% 0.12 68 / 45%);
  --color-gold-50:   oklch(72% 0.12 68 / 50%);
  --color-gold-55:   oklch(72% 0.12 68 / 55%);
  --color-gold-65:   oklch(72% 0.12 68 / 65%);

  /* ── Primitive: white alpha (glass, overlays) ───────────── */
  --color-white-4:  oklch(100% 0 0 /  4%);
  --color-white-5:  oklch(100% 0 0 /  5%);
  --color-white-6:  oklch(100% 0 0 /  6%);
  --color-white-7:  oklch(100% 0 0 /  7%);
  --color-white-8:  oklch(100% 0 0 /  8%);
  --color-white-9:  oklch(100% 0 0 /  9%);
  --color-white-10: oklch(100% 0 0 / 10%);
  --color-white-11: oklch(100% 0 0 / 11%);
  --color-white-12: oklch(100% 0 0 / 12%);
  --color-white-14: oklch(100% 0 0 / 14%);
  --color-white-15: oklch(100% 0 0 / 15%);
  --color-white-18: oklch(100% 0 0 / 18%);
  --color-white-20: oklch(100% 0 0 / 20%);
  --color-white-35: oklch(100% 0 0 / 35%);

  /* ── Primitive: dark alpha (locked overlays) ────────────── */
  --color-dark-45:  oklch(4% 0 0 / 45%);
  --color-dark-72:  oklch(4% 0 0 / 72%);

  /* ── Primitive: акценты 11 систем ──────────────────────── */
  --color-hd:      oklch(78% 0.15 200);   /* Human Design */
  --color-astro:   oklch(76% 0.14 68);    /* Astrology */
  --color-num:     oklch(68% 0.16 290);   /* Numerology */
  --color-matrix:  oklch(65% 0.21 340);   /* Matrix */
  --color-pyth:    oklch(68% 0.17 20);    /* Pythagorean */
  --color-vedic:   oklch(70% 0.18 340);   /* Vedic */
  --color-chinese: oklch(74% 0.17 40);    /* Chinese */
  --color-lunar:   oklch(84% 0.18 130);   /* Lunar */
  --color-gk:      oklch(68% 0.19 310);   /* Gene Keys */
  --color-maya:    oklch(77% 0.15 175);   /* Maya */
  --color-dasha:   oklch(83% 0.16 85);    /* Dasha */
}

/* ─────────────────────────────────────────────────────────────
   SEMANTIC TOKENS
   Роль в системе. Ссылаются на primitive. Использовать в компонентах.
───────────────────────────────────────────────────────────────*/
:root {

  /* ── Semantic: фоны ─────────────────────────────────────── */
  --bg:       var(--color-bg-0);
  --bg-deep:  oklch(5% 0 0);             /* глубже страницы */
  --surface:  var(--color-bg-1);
  --surface2: var(--color-bg-2);
  --surface3: var(--color-bg-3);

  /* ── Semantic: текст ────────────────────────────────────── */
  --text:       var(--color-text-0);
  --text-2:     var(--color-text-1);
  --text-muted: var(--color-text-2);
  --text-dim:   var(--color-white-15);   /* очень приглушённый */

  /* ── Semantic: gold ─────────────────────────────────────── */
  --gold:       var(--color-gold);
  --gold-hi:    var(--color-gold-hi);
  --gold-glow:  var(--color-gold-25);
  --gold-dim:   var(--color-gold-22);
  --gold-faint: var(--color-gold-8);

  /* ── Semantic: hover через color-mix ───────────────────── */
  --gold-hover: color-mix(in oklch, var(--color-gold) 85%, white);
  --gold-press: color-mix(in oklch, var(--color-gold) 70%, black);
  --card-bg-hover: color-mix(in oklch, var(--color-bg-1) 90%, white);

  /* ── Semantic: акценты систем (алиасы для совместимости) ── */
  --hd:      var(--color-hd);
  --astro:   var(--color-astro);
  --num:     var(--color-num);
  --matrix:  var(--color-matrix);
  --pyth:    var(--color-pyth);
  --vedic:   var(--color-vedic);
  --chinese: var(--color-chinese);
  --lunar:   var(--color-lunar);
  --gk:      var(--color-gk);
  --maya:    var(--color-maya);
  --dasha:   var(--color-dasha);

  /* ── Semantic: glass / border ───────────────────────────── */
  --glass-1:    var(--color-white-4);
  --glass-2:    var(--color-white-7);
  --glass-3:    var(--color-white-11);
  --glass-hero: var(--color-white-8);
  --border:          var(--color-border-0);
  --border2:         var(--color-border-1);
  --border3:         var(--color-border-2);
  --border-gold:     var(--color-gold-25);
  --border-gold-hi:  var(--color-gold-45);

  /* ── Semantic: blur ─────────────────────────────────────── */
  --blur-sm: 8px;
  --blur-md: 16px;
  --blur-lg: 24px;
  --blur-xl: 32px;

  /* ── Semantic: safe areas ───────────────────────────────── */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top:    env(safe-area-inset-top, 0px);

  /* 25002500 Semantic: статусные цвета 25002500250025002500250025002500250025002500250025002500250025002500250025002500250025002500250025002500 */
  --color-error:   oklch(65% 0.20 25);    /* красный */
  --color-success: oklch(70% 0.18 145);   /* зелёный */
  --color-warning: oklch(78% 0.15 60);    /* жёлтый */

  /* ── Semantic: шрифты ───────────────────────────────────── */
  --font-serif: 'Cormorant Garamond', 'Playfair Display', serif;
  --font-mono:  'DM Mono', 'Fira Code', monospace;
  --font-sans:  'DM Sans', system-ui, sans-serif;

  /* ── Semantic: типографическая шкала (роли) ─────────────── */
  --t-display: clamp(2.8rem, 9vw, 5rem);       /* имя пользователя */
  --t-hero:    clamp(1.6rem, 4vw, 2.4rem);     /* fingerprint title */
  --t-title:   clamp(1.1rem, 2.5vw, 1.5rem);  /* заголовок карточки */
  --t-value:   clamp(1rem, 2.2vw, 1.25rem);   /* значение параметра */
  --t-body:    clamp(1rem, 2vw, 1.1rem);       /* синтез, текст */
  --t-small:   clamp(0.875rem, 1.8vw, 0.95rem);
  --t-label:   clamp(0.65rem, 1.2vw, 0.72rem); /* лейбл */
  --t-meta:    clamp(0.62rem, 1.1vw, 0.68rem); /* дата, мета */

  /* Шкала размеров (для blueprint.css совместимость) */
  --text-xs:   clamp(0.625rem, 1.5vw, 0.75rem);
  --text-sm:   clamp(0.75rem,  1.8vw, 0.875rem);
  --text-base: clamp(0.875rem, 2vw,   1rem);
  --text-md:   clamp(1rem,     2.2vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 2.5vw, 1.375rem);
  --text-xl:   clamp(1.375rem, 3vw,   1.75rem);
  --text-2xl:  clamp(1.75rem,  4vw,   2.5rem);
  --text-3xl:  clamp(2.5rem,   6vw,   4rem);
  --text-hero: clamp(3rem,     8vw,   5.5rem);

  /* ── Semantic: line heights ─────────────────────────────── */
  --lh-display: 1;
  --lh-hero:    1.15;
  --lh-title:   1.25;
  --lh-body:    1.75;
  --lh-card:    1.6;
  --lh-label:   1;
  --lh-meta:    1.4;

  /* ── Semantic: letter spacing ───────────────────────────── */
  --ls-label: 0.18em;
  --ls-meta:  0.08em;
  --ls-mono:  0.06em;

  /* ── Semantic: spacing (fluid) ──────────────────────────── */
  --space-xs:  clamp(0.25rem, 0.5vw,  0.5rem);
  --space-sm:  clamp(0.5rem,  1vw,    0.75rem);
  --space-md:  clamp(0.75rem, 2vw,    1rem);
  --space-lg:  clamp(1rem,    3vw,    1.5rem);
  --space-xl:  clamp(1.5rem,  4vw,    2rem);
  --space-2xl: clamp(2rem,    5vw,    3rem);
  --space-3xl: clamp(3rem,    6vw,    5rem);

  /* ── Semantic: radius ───────────────────────────────────── */
  --r-sm: 8px;
  --r:    16px;
  --r-lg: 24px;
  --r-xl: 32px;

  /* ── Semantic: layout ───────────────────────────────────── */
  --content-max: 1200px;
  --content-pad: clamp(1rem, 5vw, 2rem);
  --reading-max: 720px;

  /* ── Semantic: z-index ──────────────────────────────────── */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:   10;   /* sticky nav dots */
  --z-sticky:   50;   /* tooltips */
  --z-nav:      80;   /* bottom nav */
  --z-header:   100;  /* top/side навигация */
  --z-sheet:    200;  /* system sheet, bottom sheet */
  --z-overlay:  300;  /* dropdown, tooltip */
  --z-modal:    400;  /* модальные окна */
  --z-toast:    500;  /* toast уведомления */
  --z-noise:    1000; /* noise overlay */

  /* ── Semantic: motion ───────────────────────────────────── */
  --duration-instant:    80ms;
  --duration-fast:      150ms;
  --duration-normal:    250ms;
  --duration-slow:      400ms;
  --duration-deliberate: 600ms;

  --ease-out:    cubic-bezier(0.0, 0, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-linear: linear;
}

/* ─────────────────────────────────────────────────────────────
   COMPONENT TOKENS
   Конкретные компоненты. Ссылаются на semantic.
───────────────────────────────────────────────────────────────*/
:root {

  /* ── Component: Elevation система ──────────────────────── */
  /* Уровень 1 — card (обычная карточка) */
  --el-1-bg:     var(--color-bg-1);
  --el-1-border: var(--color-border-0);
  --el-1-shadow: 0 1px 3px oklch(0% 0 0 / 20%);
  --el-1-blur:   blur(var(--blur-sm));

  /* Уровень 2 — sheet, dropdown */
  --el-2-bg:     var(--color-bg-2);
  --el-2-border: var(--color-border-1);
  --el-2-shadow: 0 4px 16px oklch(0% 0 0 / 30%);
  --el-2-blur:   blur(var(--blur-md));

  /* Уровень 3 — hero card, featured */
  --el-3-bg:     oklch(15% 0.01 260 / 80%);
  --el-3-border: var(--color-border-1);
  --el-3-shadow: 0 8px 32px oklch(0% 0 0 / 40%);
  --el-3-blur:   blur(var(--blur-lg));

  /* Уровень 4 — overlay (modal, toast, bottom sheet) */
  --el-4-bg:     var(--color-bg-1);
  --el-4-shadow: 0 16px 48px oklch(0% 0 0 / 60%);
  --el-4-blur:   blur(var(--blur-xl));

  /* ── Component: Card system ─────────────────────────────── */
  /* Уровень 1 — базовый контейнер (systems, synthesis, q&a) */
  --card-bg:      var(--color-white-4);
  --card-border:  var(--color-border-0);
  --card-radius:  var(--r-lg);
  --card-pad:     var(--space-xl);

  /* Уровень 2 — вложенные карточки (hero smalls, param items) */
  --card2-bg:     var(--color-white-6);
  --card2-border: var(--color-border-1);
  --card2-radius: var(--r);
  --card2-pad:    var(--space-lg);

  /* Уровень 3 — hero fingerprint, gold accent */
  --card3-bg:     var(--color-white-8);
  --card3-border: var(--color-gold-22);
  --card3-radius: var(--r-xl);
  --card3-pad:    var(--space-xl);
  --card3-glow:   0 0 40px var(--color-gold-8), inset 0 1px 0 var(--color-white-7);
}