/* ============================================================
   VIKO CHEAT — Design System v3 (built on DS v2)
   Tokens only. Every colour, size, duration and layer used by
   the interface is defined here and nowhere else.
   ============================================================ */

:root {
  /* ── Palette ─────────────────────────────────────────────── */
  --c-void:      #020408;
  --c-black:     #050A10;
  --c-navy-900:  #071426;
  --c-navy-800:  #0B2038;
  --c-navy-700:  #10294A;
  --c-blue:      #00AFFF;
  --c-blue-hi:   #00B8FF;
  --c-cyan:      #19D8FF;
  --c-cyan-hi:   #00F0FF;
  --c-white:     #FFFFFF;
  --c-paper:     #F5F8FC;
  --c-soft:      #C8D2DE;
  --c-muted:     #7F8C9D;

  /* Status (product: active / updating / inactive) */
  --c-green:     #2BD67B;
  --c-red:       #FF4D5E;
  --c-amber:     #FFB547;
  --c-green-bg:  rgba(43, 214, 123, 0.10);
  --c-blue-bg:   rgba(0, 175, 255, 0.10);
  --c-red-bg:    rgba(255, 77, 94, 0.10);
  --c-amber-bg:  rgba(255, 181, 71, 0.10);

  /* ── Surfaces (black-dominant; navy is a tint, not a fill) ── */
  --surface-0:   var(--c-void);
  --surface-1:   #060B12;
  --surface-2:   #09121D;
  --surface-3:   #0D1928;
  --surface-4:   #112136;
  --surface-paper: var(--c-paper);

  /* ── Lines ─────────────────────────────────────────────── */
  --line:        rgba(200, 210, 222, 0.09);
  --line-mid:    rgba(200, 210, 222, 0.16);
  --line-strong: rgba(200, 210, 222, 0.28);
  --line-blue:   rgba(0, 175, 255, 0.45);

  /* ── Text ──────────────────────────────────────────────── */
  --tx-strong:   var(--c-white);
  --tx:          var(--c-soft);
  --tx-muted:    var(--c-muted);
  --tx-faint:    #56616F;
  --tx-accent:   var(--c-blue);
  --tx-on-blue:  #00131F;
  --tx-on-paper: #050A10;

  /* ── Typography ───────────────────────────────────────── */
  --font-display: "Archivo", "Vazirmatn", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Archivo", "Vazirmatn", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  --stretch-display: 125%;
  --stretch-head:    112%;
  --stretch-body:    100%;

  --fs-display: clamp(2.75rem, 6vw, 5.75rem);
  --fs-h1:      clamp(2.1rem, 4.4vw, 3.6rem);
  --fs-h2:      clamp(1.6rem, 2.8vw, 2.4rem);
  --fs-h3:      1.25rem;
  --fs-lead:    1.125rem;
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-caption: 0.8125rem;
  --fs-meta:    0.75rem;

  --lh-tight: 1.02;
  --lh-head:  1.12;
  --lh-body:  1.6;

  /* ── Spacing (4px base) ──────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 136px;

  /* ── Shape: small radii + the chamfer cut ─────────────── */
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-pill: 999px;
  --cut-sm: 6px;
  --cut:    12px;
  --cut-lg: 22px;

  /* ── Elevation ────────────────────────────────────────── */
  --shadow-1: 0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 24px rgba(0,0,0,0.35);
  --shadow-2: 0 1px 0 rgba(255,255,255,0.04) inset, 0 18px 48px rgba(0,0,0,0.5);
  --shadow-3: 0 30px 80px rgba(0,0,0,0.6);
  --glow-blue: 0 0 0 1px rgba(0,175,255,0.35), 0 10px 40px rgba(0,175,255,0.18);

  /* ── Layout ───────────────────────────────────────────── */
  --container-max: 1280px;
  --container-wide: 1440px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-height: 68px;
  --sidebar-width: 256px;

  /* ── Motion ───────────────────────────────────────────── */
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 140ms;
  --dur-2: 240ms;
  --dur-3: 420ms;
  --dur-4: 700ms;
  --dur-5: 1200ms;

  /* ── Layers ───────────────────────────────────────────── */
  --z-scene:    0;
  --z-base:     1;
  --z-raised:   10;
  --z-sticky:   300;
  --z-header:   400;
  --z-dropdown: 500;
  --z-drawer:   600;
  --z-overlay:  700;
  --z-modal:    800;
  --z-toast:    900;

  /* ── DS v2 compatibility aliases (do not use in new code) ── */
  --void: var(--c-void);
  --base: var(--c-black);
  --navy-deep: var(--c-navy-900);
  --navy: var(--c-navy-800);
  --electric: var(--c-blue);
  --electric-vivid: var(--c-cyan);
  --electric-dim: #0088CC;
  --electric-glow: rgba(0,175,255,0.18);
  --ice: var(--c-soft);
  --white: var(--c-paper);
  --bg-void: var(--surface-0);
  --bg-base: var(--surface-1);
  --bg-elevated: var(--surface-2);
  --bg-card: var(--surface-2);
  --bg-card-alt: var(--surface-3);
  --bg-card-hover: var(--surface-3);
  --text-primary: var(--tx-strong);
  --text-secondary: var(--tx);
  --text-muted: var(--tx-muted);
  --border-subtle: var(--line);
  --border-mid: var(--line-mid);
  --border-strong: var(--line-strong);
  --red-primary: var(--c-red);
  --status-active: var(--c-green);
  --status-pending: var(--c-amber);
  --status-expired: var(--c-red);
  --status-completed: var(--c-green);
  --dur-fast: var(--dur-1);
  --dur-base: var(--dur-2);
  --dur-slow: var(--dur-3);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms;
    --dur-2: 0ms;
    --dur-3: 0ms;
    --dur-4: 0ms;
    --dur-5: 0ms;
  }
}