/* ============================================================
   ASUTLab Design System — Tokens
   v2.0 · Notion design system ("warm paper notebook")
   Значения токенов переведены на Notion-палитру; имена токенов
   и переменных сохранены — шаблоны и components.css не менялись
   по структуре.
============================================================ */

:root{
  /* ---------- COLOR · Notion raw palette ---------- */
  --color-notion-blue:#0075de;
  --color-paper-warmth:#f6f5f4;
  --color-pure-white:#fff;
  --color-ink-black:#000;
  --color-stone:#757575;
  --color-graphite:#615d59;
  --color-slate:#696969;
  --color-sky-tint:#e6f3fe;
  --color-marigold:#ffb110;
  --color-coral:#f64932;
  --color-signal-blue:#097fe8;
  --color-sky-wash:#62aef0;
  --color-midnight-ink:#02093a;

  /* ---------- COLOR · raw palette (перемаплено на Notion) ---------- */
  --c-graphite-900:#000000;
  --c-graphite-800:#17130f;   /* primary surface dark · тёмный чат/тултип/тост */
  --c-graphite-700:#2c2824;
  --c-steel-600:var(--color-graphite);
  --c-steel-500:var(--color-stone);
  --c-mist-400:rgba(0,0,0,.4);
  --c-mist-300:rgba(0,0,0,.24);
  --c-mist-200:rgba(0,0,0,.12);
  --c-rule-150:rgba(0,0,0,.08);
  --c-paper-100:var(--color-paper-warmth);   /* primary surface light · тёплый канвас */
  --c-paper-50:#faf9f8;
  --c-white:var(--color-pure-white);

  --c-signal-700:#054e91;
  --c-signal-600:#0067bd;
  --c-signal-500:var(--color-notion-blue);   /* brand accent · единственная синяя заливка */
  --c-signal-400:var(--color-sky-wash);
  --c-signal-100:#cfe7fb;
  --c-signal-50:var(--color-sky-tint);

  --c-ok-600:#0b5fb0;
  --c-ok-500:var(--color-signal-blue);
  --c-ok-100:var(--color-sky-tint);
  --c-warn-600:#8a5c00;
  --c-warn-500:var(--color-marigold);
  --c-warn-100:rgba(255,177,16,.12);
  --c-bad-600:#b7301f;
  --c-bad-500:var(--color-coral);
  --c-bad-100:rgba(246,73,50,.10);
  --c-info-500:var(--color-notion-blue);
  --c-info-100:var(--color-sky-tint);

  /* ---------- COLOR · semantic (light theme) ---------- */
  --bg-canvas:        var(--color-paper-warmth);
  --bg-surface:       var(--color-pure-white);
  --bg-sunken:        var(--color-paper-warmth);
  --bg-inverse:        #17130f;
  --bg-inverse-2:      #2c2824;

  --fg-primary:       var(--color-ink-black);
  --fg-secondary:     rgba(0,0,0,.6);
  --fg-muted:         rgba(0,0,0,.4);
  --fg-inverse:       var(--color-paper-warmth);
  --fg-inverse-muted: rgba(255,255,255,.6);
  --fg-accent:        var(--color-notion-blue);

  --border-subtle:    rgba(0,0,0,.08);
  --border-default:   rgba(0,0,0,.12);
  --border-strong:    rgba(0,0,0,.24);
  --border-accent:    var(--color-notion-blue);

  --status-ok:        var(--c-ok-500);
  --status-ok-bg:     var(--c-ok-100);
  --status-warn:      var(--c-warn-600);
  --status-warn-bg:   var(--c-warn-100);
  --status-bad:       var(--c-bad-500);
  --status-bad-bg:    var(--c-bad-100);
  --status-info:      var(--c-info-500);
  --status-info-bg:   var(--c-info-100);

  /* ---------- TYPE ---------- */
  --font-display:'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-text:'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* type scale — Notion (body 16px/1.5, heading-sm 22px, heading 40px, display-sm 54px) */
  --t-display:   54px;
  --t-h1:        40px;
  --t-h2:        28px;
  --t-h3:        22px;
  --t-body-lg:   16px;
  --t-body:      16px;
  --t-caption:   14px;
  --t-mono:      12px;     /* labels, metadata */
  --t-num-xl:    48px;     /* KPI giant */
  --t-num-lg:    32px;     /* KPI medium */

  --lh-tight:1.1;
  --lh-snug:1.27;
  --lh-normal:1.5;
  --lh-relaxed:1.6;

  --tracking-tight:-0.021em;
  --tracking-normal:0;
  --tracking-wide:0.02em;
  --tracking-mono:0.04em;

  /* ---------- SPACE · 8px base ---------- */
  --space-0: 0;
  --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;
  --space-20:80px;
  --space-24:96px;

  /* ---------- RADIUS · Notion (карточки 12px, кнопки/поля 8px, пилюли pill) ---------- */
  --r-0: 0;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 9999px;

  /* ---------- BORDER ---------- */
  --bw-1: 1px;
  --bw-2: 2px;

  /* ---------- ELEVATION · Notion: hairline вместо теней ---------- */
  --elev-0: none;
  --elev-1: none;
  --elev-2: none;
  --elev-3: none;
  --elev-nav: 0 1px 2px rgba(0,0,0,.03);
  --elev-overlay: 0 16px 40px -16px rgba(0,0,0,.22);

  /* ---------- MOTION ---------- */
  --dur-instant: 80ms;
  --dur-fast:    140ms;
  --dur-base:    200ms;
  --dur-slow:    320ms;
  --ease-out:    cubic-bezier(.2,.7,.2,1);
  --ease-in-out: cubic-bezier(.6,.0,.2,1);

  /* ---------- LAYOUT ---------- */
  --layout-max:   1440px;
  --sidebar-w:    260px;
  --topbar-h:     56px;
  --grid-gap:     16px;
  --grid-cols:    12;
}

/* dark theme overrides (не используется в billing-asut — base.html всегда
   data-theme="light", оставлено для совместимости с ds-* утилитами) */
[data-theme="dark"]{
  --bg-canvas:        #14110d;
  --bg-surface:       #1c1814;
  --bg-sunken:        #221d18;
  --bg-inverse:       var(--color-paper-warmth);
  --bg-inverse-2:     #faf9f8;

  --fg-primary:       #f3f1ee;
  --fg-secondary:     rgba(255,255,255,.64);
  --fg-muted:         rgba(255,255,255,.4);
  --fg-inverse:       #000;
  --fg-inverse-muted: rgba(0,0,0,.6);

  --border-subtle:    rgba(255,255,255,.08);
  --border-default:   rgba(255,255,255,.14);
  --border-strong:    rgba(255,255,255,.28);

  --elev-1: none;
  --elev-2: none;
  --elev-3: none;
}