/* ─── Vydra Design System: "Forge" — Canonical Token File ────
   Single source of truth for all design tokens shared across
   the landing pages and the React application.

   Both naming conventions are defined here:
     • --v-*  (prefixed) — used by the React app (packages/client)
     • short  (unprefixed) — used by static landing HTML files

   Always edit this file first; then it propagates everywhere.
──────────────────────────────────────────────────────────── */

:root {
  /* ════════════════════════════════════════════════════════
     CORE PALETTE
  ════════════════════════════════════════════════════════ */

  /* Depths — darkest → lightest surface */
  --v-black:      #09090b;
  --v-surface-0:  #0c0c0f;
  --v-surface-1:  #131316;
  --v-surface-2:  #1a1a1f;
  --v-surface-3:  #222228;
  --v-surface-4:  #2a2a32;

  /* Borders */
  --v-border:        #32323c;
  --v-border-subtle: #28282f;

  /* ════════════════════════════════════════════════════════
     TEXT
  ════════════════════════════════════════════════════════ */

  --v-text:          #f0f0f2;
  --v-text-secondary: #9898a6;
  --v-text-tertiary:  #636372;
  --v-text-disabled:  #4a4a56;

  /* ════════════════════════════════════════════════════════
     ACCENT — warm amber
  ════════════════════════════════════════════════════════ */

  --v-accent:       #f0a030;
  --v-accent-hover: #f5b550;
  --v-accent-muted: rgba(240, 160, 48, 0.15);
  --v-accent-text:  #09090b;

  /* Glow helpers (accent-based shadows) */
  --v-glow:  0 0 40px rgba(240, 160, 48, 0.18), 0 0 80px rgba(240, 160, 48, 0.06);
  --v-glowb: 0 0 20px rgba(240, 160, 48, 0.28);

  /* ════════════════════════════════════════════════════════
     SEMANTIC COLOURS
  ════════════════════════════════════════════════════════ */

  --v-success:       #34d399;
  --v-success-muted: rgba(52, 211, 153, 0.15);
  --v-error:         #f87171;
  --v-error-muted:   rgba(248, 113, 113, 0.15);
  --v-warning:       #fbbf24;
  --v-info:          #60a5fa;

  /* ════════════════════════════════════════════════════════
     TRACK / CLIP COLOURS
  ════════════════════════════════════════════════════════ */

  --v-track-video:   #6366f1;
  --v-track-audio:   #22c55e;
  --v-track-caption: #f59e0b;

  --v-clip-video:         rgba(99,  102, 241, 0.55);
  --v-clip-video-border:  rgba(99,  102, 241, 0.8);
  --v-clip-audio:         rgba(34,  197,  94, 0.45);
  --v-clip-audio-border:  rgba(34,  197,  94, 0.7);
  --v-clip-caption:       rgba(245, 158,  11, 0.45);
  --v-clip-caption-border:rgba(245, 158,  11, 0.7);
  --v-clip-selected:      rgba(240, 160,  48, 0.25);

  /* ════════════════════════════════════════════════════════
     TYPOGRAPHY
  ════════════════════════════════════════════════════════ */

  --v-font:      'Outfit', system-ui, -apple-system, sans-serif;
  --v-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --v-text-xs:   0.6875rem;  /* 11px */
  --v-text-sm:   0.75rem;    /* 12px */
  --v-text-base: 0.8125rem;  /* 13px */
  --v-text-md:   0.875rem;   /* 14px */
  --v-text-lg:   1rem;       /* 16px */
  --v-text-xl:   1.25rem;    /* 20px */
  --v-text-2xl:  1.5rem;     /* 24px */

  /* ════════════════════════════════════════════════════════
     SPACING
  ════════════════════════════════════════════════════════ */

  --v-space-1:  4px;
  --v-space-2:  8px;
  --v-space-3:  12px;
  --v-space-4:  16px;
  --v-space-5:  20px;
  --v-space-6:  24px;
  --v-space-8:  32px;
  --v-space-10: 40px;
  --v-space-12: 48px;

  /* ════════════════════════════════════════════════════════
     RADII
  ════════════════════════════════════════════════════════ */

  --v-radius-sm: 4px;
  --v-radius-md: 6px;
  --v-radius-lg: 8px;
  --v-radius-xl: 12px;

  /* ════════════════════════════════════════════════════════
     SHADOWS
  ════════════════════════════════════════════════════════ */

  --v-shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.4);
  --v-shadow-md:   0 4px 12px rgba(0, 0, 0, 0.5);
  --v-shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.6);
  --v-shadow-glow: 0 0 20px rgba(240, 160, 48, 0.15);

  /* ════════════════════════════════════════════════════════
     TRANSITIONS
  ════════════════════════════════════════════════════════ */

  --v-transition-fast: 120ms ease;
  --v-transition-base: 200ms ease;
  --v-transition-slow: 350ms ease;

  /* ════════════════════════════════════════════════════════
     LAYOUT
  ════════════════════════════════════════════════════════ */

  --v-header-h:       48px;
  --v-panel-min:      240px;
  --v-timeline-min-h: 200px;
  --v-timeline-handle: 6px;

  /* ════════════════════════════════════════════════════════
     Z-INDEX STACK
  ════════════════════════════════════════════════════════ */

  --v-z-panel:    10;
  --v-z-playhead: 20;
  --v-z-chat:     25;
  --v-z-overlay:  30;
  --v-z-modal:    60;
  --v-z-toast:    70;

  /* ════════════════════════════════════════════════════════
     SHORT-NAME ALIASES
     For static landing HTML files that use the terse token
     names. Always map to the canonical --v-* values above.
  ════════════════════════════════════════════════════════ */

  --ink:    var(--v-black);
  --bg:     var(--v-black);
  --s0:     var(--v-surface-0);
  --s1:     var(--v-surface-1);
  --s2:     var(--v-surface-2);
  --s3:     var(--v-surface-3);
  --s4:     var(--v-surface-4);
  --border: var(--v-border);
  --bsub:   var(--v-border-subtle);

  --text:  var(--v-text);
  --text2: var(--v-text-secondary);
  --text3: var(--v-text-tertiary);

  --acc:  var(--v-accent);
  --acch: var(--v-accent-hover);
  --accm: var(--v-accent-muted);
  --accg: rgba(240, 160, 48, 0.06);

  --glow:  var(--v-glow);
  --glowb: var(--v-glowb);

  --font: var(--v-font);
  --mono: var(--v-font-mono);
}