/* ============================================================
   XEU LABS — Design Tokens
   Источник палитры: Figma «Draft palette / XEU v0.1» (node 239:73)
   Тема: dual (light приоритет). Применение — минимал-монохром,
   бирюза #3F9898 как ЕДИНСТВЕННЫЙ акцент, дозированно.
   ============================================================ */

:root {
  /* ---------- PRIMITIVES (color ramps 50→900) ---------- */
  /* Turquoise / brand accent (source #3F9898) */
  --t-turquoise-50:#EFFBFA; --t-turquoise-100:#D7F1F0; --t-turquoise-200:#B3E3E1;
  --t-turquoise-300:#84CFCD; --t-turquoise-400:#57B5B4; --t-turquoise-500:#3F9898;
  --t-turquoise-600:#327F80; --t-turquoise-700:#286566; --t-turquoise-800:#1E4B4C; --t-turquoise-900:#143536;

  /* Olive / institutional */
  --t-olive-50:#F6F8F0; --t-olive-100:#E2E6D7; --t-olive-200:#CAD1BA; --t-olive-300:#B1B8A0;
  --t-olive-400:#808967; --t-olive-500:#545E3A; --t-olive-600:#3F472C; --t-olive-700:#2C331D;
  --t-olive-800:#232815; --t-olive-900:#0F1208;

  /* Neutral / UI basics */
  --t-neutral-50:#FFFFFF; --t-neutral-100:#F7F7F5; --t-neutral-200:#EFEFED; --t-neutral-300:#E5E5E5;
  --t-neutral-400:#D0D0CD; --t-neutral-500:#9D9D9D; --t-neutral-600:#747474; --t-neutral-700:#4B4B4B;
  --t-neutral-800:#141414; --t-neutral-900:#0E0E0E;

  /* Status: success / danger / gold(warning + asset) / copper(secondary) / info */
  --t-success-500:#2E9958; --t-success-600:#237A45; --t-success-700:#1C6037;
  --t-danger-500:#D94D4D;  --t-danger-600:#B93A3A;  --t-danger-700:#922D2D;
  --t-gold-300:#E8C04F; --t-gold-500:#B98624; --t-gold-700:#704C18;
  --t-copper-400:#DA8642; --t-copper-500:#B9682F; --t-copper-700:#733E20;
  --t-info-500:#3B82F6;  --t-info-600:#2563EB;  --t-info-700:#1D4ED8;

  /* ---------- SPACING / RADIUS / TYPE SCALE (из design-system/README) ---------- */
  --sp-2:2px; --sp-4:4px; --sp-8:8px; --sp-12:12px; --sp-16:16px; --sp-20:20px; --sp-24:24px;
  --sp-32:32px; --sp-40:40px; --sp-48:48px; --sp-56:56px; --sp-64:64px; --sp-80:80px; --sp-96:96px; --sp-120:120px; --sp-160:160px;
  --r-2:2px; --r-4:4px; --r-8:8px; --r-12:12px; --r-16:16px; --r-20:20px; --r-24:24px; --r-pill:999px;

  /* ---------- TYPOGRAPHY (families + fluid scale; clamp = uniform across breakpoints) ---------- */
  --font-display:'Exo 2',sans-serif;
  --font-body:'Commissioner',sans-serif;
  --font-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --text-hero:clamp(2.8rem,7vw,5.5rem);     /* hero H1 */
  --text-display:clamp(2rem,4.4vw,3.4rem);  /* section H2 */
  --text-h3:1.34rem;                        /* card / pillar titles */
  --text-lead:1.02rem;                      /* section lead */
  --text-body:.95rem;                       /* body */
  --text-small:.82rem;                      /* captions */
  --text-mono:.72rem;                       /* mono labels / specs */
  --lh-tight:1.05; --lh-base:1.55;

  /* Responsive (Apple-style frames): 375 · 640 · 834 · 1068 · 1440; ≥1441 — content locks at 1440 */
  --bp-phone:640px; --bp-tablet:834px; --bp-laptop:1068px; --bp-desktop:1440px;
  --max-w:1440px;        /* content-lock: на ≥1441 контент центрируется и фиксируется на 1440 */

  /* Motion */
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-inout:cubic-bezier(0.77,0,0.175,1);
  --dur-fast:120ms; --dur-base:180ms; --dur-slow:280ms;
}

/* ============================================================
   SEMANTIC — LIGHT (приоритет, язык эталона A: тёплый off-white,
   белые панели, near-black текст, бирюза точечно, чёрный pill-CTA)
   ============================================================ */
:root,
[data-theme="light"] {
  color-scheme: light;
  --bg:            #FAFAF8;                 /* тёплый off-white холст */
  --bg-elev:       var(--t-neutral-100);    /* секции-чередование */
  --surface:       #FFFFFF;                 /* панели/карточки */
  --surface-2:     var(--t-neutral-100);
  --text:          var(--t-neutral-900);    /* near-black */
  --text-secondary:var(--t-neutral-600);
  --text-muted:    var(--t-neutral-500);
  --text-inverse:  #FFFFFF;
  --border:        var(--t-neutral-200);    /* hairline */
  --border-strong: var(--t-neutral-300);

  --accent:        var(--t-turquoise-500);  /* единственный акцент */
  --accent-weak:   var(--t-turquoise-100);
  --accent-text:   var(--t-turquoise-500);  /* = бренд-акцент: единый зелёный на светлой теме (как значок/точки) */

  --action:        var(--t-neutral-900);    /* primary CTA = near-black pill (эталон A) */
  --action-hover:  #000000;
  --action-text:   #FFFFFF;

  --success:var(--t-success-600); --danger:var(--t-danger-600);
  --warning:var(--t-gold-700);    --info:var(--t-info-700);

  --grid-line: rgba(14,14,14,.06);
  --shadow-card: 0 1px 2px rgba(14,14,14,.04), 0 12px 32px rgba(14,14,14,.06);
}

/* ============================================================
   SEMANTIC — DARK (язык эталона B: near-black, крупный editorial,
   белый текст, белый pill-CTA, бирюза светлее для контраста)
   ============================================================ */
[data-theme="dark"] {
  color-scheme: dark;
  --bg:            #0A0B0A;
  --bg-elev:       #101110;
  --surface:       #141514;
  --surface-2:     #1A1B1A;
  --text:          #FAFAF9;
  --text-secondary:var(--t-neutral-400);
  --text-muted:    var(--t-neutral-500);
  --text-inverse:  var(--t-neutral-900);
  --border:        rgba(255,255,255,.10);
  --border-strong: rgba(255,255,255,.18);

  --accent:        var(--t-turquoise-400);
  --accent-weak:   rgba(63,152,152,.16);
  --accent-text:   var(--t-turquoise-300);

  --action:        #FAFAF9;                 /* white pill (эталон B) */
  --action-hover:  #FFFFFF;
  --action-text:   var(--t-neutral-900);

  --success:var(--t-success-500); --danger:var(--t-danger-500);
  --warning:var(--t-gold-300);    --info:var(--t-info-500);

  --grid-line: rgba(255,255,255,.06);
  --shadow-card: 0 8px 40px rgba(0,0,0,.5);
}