/* VIDIUM Design System — Design Tokens */
/* Single source of truth. Canonical palette from Brandbook 2.0. */
/* Loaded by every page: guidelines, design-system hub, and all new projects. */

:root {
  --vd-mark-url: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='49 49 99 111' fill='none'%3E%3Cpath fill='black' d='M98.7,57.9c1.1,0,2.2,0.3,3.2,0.8l34.7,20c2,1.1,3.2,3.2,3.2,5.5v40c0,2.3-1.2,4.3-3.2,5.5l-34.7,20 c-2,1.1-4.4,1.1-6.3,0l-34.7-20c-1.9-1.1-3.1-3.2-3.2-5.5v-40c0-2.3,1.2-4.3,3.2-5.5l34.7-20C96.5,58.2,97.6,57.9,98.7,57.9 M98.7,52.1c-2.1,0-4.2,0.6-6.1,1.6l-34.7,20c-3.8,2.2-6.1,6.2-6.1,10.5v40c0,4.3,2.3,8.4,6.1,10.5l34.7,20c3.8,2.2,8.4,2.2,12.1,0 l34.7-20c3.7-2.2,6-6.1,6.1-10.4v-40c0-4.3-2.3-8.4-6.1-10.5l-34.7-20C103,52.7,100.9,52.2,98.7,52.1L98.7,52.1z M105.9,104.9 l12.1-3.2c0.6-0.2,1.3,0.2,1.5,0.9c0.1,0.3,0,0.6-0.1,0.8L104.1,134c-0.3,0.6-1,0.8-1.6,0.5c-0.3-0.1-0.4-0.3-0.6-0.6l-3.9-7.7 c-0.7-1.4-0.8-3-0.4-4.6l4.1-12.9C102.3,107,103.9,105.4,105.9,104.9z M65.9,96.2l41.2-13.7c1.3-0.4,2.5-0.4,3.8,0l13.4,4.5 c0.6,0.2,0.9,0.9,0.7,1.6c-0.1,0.3-0.3,0.6-0.6,0.7l-39.5,18.5c-1.9,0.9-4.2,0.8-5.9-0.4l-13.3-9.1c-0.6-0.4-0.7-1.1-0.3-1.7 C65.4,96.4,65.7,96.2,65.9,96.2z'%3E%3C/path%3E%3C/svg%3E");

  /* ===================================================================== */
  /* CORE PALETTE — Brandbook 2.0 canon                                    */
  /* ===================================================================== */
  --vd-cyan:      #25C5CD;  /* Brand Cyan — primary brand accent */
  --vd-cyan-dark: #007C84;  /* Dark Cyan — text-safe accent on light (AA) */
  --vd-mint:      #5FD6A8;  /* Mid-stop of the brand gradient */
  --vd-lime:      #D7F75B;  /* Pulse Lime — signal accent only */

  /* Cool-neutral slate scale, anchored to brandbook neutrals */
  --vd-graphite:  #0B0F14;  /* Graphite — deepest base / primary text */
  --vd-slate-900: #0B0F14;  /* = Graphite */
  --vd-slate-800: #131A22;  /* = Deep Slate */
  --vd-slate-700: #1F2A35;
  --vd-slate-600: #303E4A;
  --vd-slate-500: #44505C;  /* = Neutral Slate */
  --vd-slate-400: #6B7682;
  --vd-slate-300: #9AA6B0;
  --vd-slate-200: #C6D0D7;
  --vd-slate-100: #E8EFF2;  /* = Mist */
  --vd-mist:      #E8EFF2;  /* Mist — light surface / dark-mode text */
  --vd-paper:     #F5F8FA;  /* Page background on light */
  --vd-white:     #FFFFFF;

  /* Named brandbook aliases */
  --vd-deep-slate:    #131A22;
  --vd-neutral-slate: #44505C;

  /* ===================================================================== */
  /* SEMANTIC                                                              */
  /* ===================================================================== */
  --vd-success:   #84CC16;  /* readable green for status text / fills */
  --vd-live:      #D7F75B;  /* on-air / live pulse = Pulse Lime */
  --vd-info:      #007C84;  /* = Dark Cyan */
  --vd-warning:   #F59E0B;
  --vd-error:     #EF4444;

  /* ===================================================================== */
  /* GRADIENT — Signal Layer only (hero, stage, motion). Never on UI.      */
  /* ===================================================================== */
  --vd-gradient-mark: linear-gradient(138deg, #25C5CD 17%, #5FD6A8 49%, #D7F75B 82%);
  --vd-gradient-flow: linear-gradient(135deg, #25C5CD 0%, #5FD6A8 50%, #D7F75B 100%);

  /* ===================================================================== */
  /* TYPE — Manrope (display) + Inter (UI/body) + IBM Plex Mono (technical) */
  /* ===================================================================== */
  --vd-font-display: 'Manrope', system-ui, sans-serif;
  --vd-font-body:    'Inter', system-ui, sans-serif;
  --vd-font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  /* ===================================================================== */
  /* SPACING — 8pt base                                                    */
  /* ===================================================================== */
  --vd-1: 4px;
  --vd-2: 8px;
  --vd-3: 12px;
  --vd-4: 16px;
  --vd-5: 24px;
  --vd-6: 32px;
  --vd-7: 48px;
  --vd-8: 64px;
  --vd-9: 96px;
  --vd-10: 128px;

  /* ===================================================================== */
  /* RADII — brandbook 12–16 + supporting steps                            */
  /* ===================================================================== */
  --vd-radius-xs: 4px;
  --vd-radius-sm: 8px;
  --vd-radius-md: 12px;
  --vd-radius-lg: 16px;
  --vd-radius-xl: 24px;
  --vd-radius-pill: 999px;

  /* ===================================================================== */
  /* MOTION — sync / route / pulse / handoff / cascade / lock-on           */
  /* ===================================================================== */
  --vd-ease-signal: cubic-bezier(0.16, 1, 0.3, 1);
  --vd-ease-control: cubic-bezier(0.4, 0, 0.2, 1);
  --vd-dur-fast: 160ms;
  --vd-dur-base: 240ms;
  --vd-dur-slow: 480ms;

  /* ===================================================================== */
  /* ELEVATION                                                             */
  /* ===================================================================== */
  --vd-shadow-sm: 0 1px 2px rgba(11,15,20,0.06), 0 1px 3px rgba(11,15,20,0.04);
  --vd-shadow-md: 0 4px 12px rgba(11,15,20,0.06), 0 2px 4px rgba(11,15,20,0.04);
  --vd-shadow-lg: 0 18px 48px rgba(11,15,20,0.12), 0 6px 16px rgba(11,15,20,0.06);
}

/* ===================================================================== */
/* MODES — Control (light, default) / Signal (dark)                      */
/* ===================================================================== */
:root,
:root[data-mode="control"] {
  --vd-bg:            #F5F8FA;
  --vd-bg-raised:     #FFFFFF;
  --vd-bg-card:       #FFFFFF;
  --vd-bg-elevated:   #E8EFF2;
  --vd-fg:            #0B0F14;
  --vd-fg-strong:     #0B0F14;
  --vd-fg-muted:      #44505C;
  --vd-fg-faint:      #8A95A0;
  --vd-accent-text:   #007C84;   /* text-safe accent */
  --vd-border:        #DCE4E9;
  --vd-border-strong: #C6D0D7;
  --vd-wordmark-color: #0B0F14;
  --vd-pattern-stroke: rgba(11,15,20,0.08);
  --vd-grid-line:     rgba(11,15,20,0.06);
}

:root[data-mode="signal"] {
  --vd-bg:            #0B0F14;
  --vd-bg-raised:     #131A22;
  --vd-bg-card:       #131A22;
  --vd-bg-elevated:   #1F2A35;
  --vd-fg:            #E8EFF2;
  --vd-fg-strong:     #FFFFFF;
  --vd-fg-muted:      #9AA6B0;
  --vd-fg-faint:      #5A6571;
  --vd-accent-text:   #25C5CD;   /* cyan is text-safe on dark */
  --vd-border:        #1F2A35;
  --vd-border-strong: #303E4A;
  --vd-wordmark-color: #FFFFFF;
  --vd-pattern-stroke: rgba(232,239,242,0.10);
  --vd-grid-line:     rgba(232,239,242,0.06);
}

/* ===================================================================== */
/* BASE                                                                  */
/* ===================================================================== */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--vd-font-body);
  background: var(--vd-bg);
  color: var(--vd-fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--vd-dur-base) var(--vd-ease-control),
              color var(--vd-dur-base) var(--vd-ease-control);
}

body {
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: 'cv05', 'cv08', 'ss01';
}

/* ===================================================================== */
/* TYPE SCALE                                                            */
/* ===================================================================== */
.vd-display {
  font-family: var(--vd-font-display);
  font-weight: 700;
  font-size: clamp(56px, 7vw, 112px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--vd-fg-strong);
}
.vd-h1 {
  font-family: var(--vd-font-display);
  font-weight: 700;
  font-size: clamp(40px, 4.5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--vd-fg-strong);
}
.vd-h2 {
  font-family: var(--vd-font-display);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--vd-fg-strong);
}
.vd-h3 {
  font-family: var(--vd-font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--vd-fg-strong);
}
.vd-body {
  font-family: var(--vd-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--vd-fg-muted);
  text-wrap: pretty;
}
.vd-lead {
  font-family: var(--vd-font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.5;
  color: var(--vd-fg-muted);
  text-wrap: pretty;
}
.vd-mono, .vd-eyebrow {
  font-family: var(--vd-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vd-fg-faint);
}

/* ===================================================================== */
/* SHARED PRIMITIVES (kept for backward-compat with the guidelines)      */
/* Full component layer lives in components.css                          */
/* ===================================================================== */
.vd-card {
  background: var(--vd-bg-card);
  border: 1px solid var(--vd-border);
  border-radius: var(--vd-radius-lg);
  overflow: hidden;
}

.vd-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--vd-2);
  padding: 6px 10px;
  border-radius: var(--vd-radius-pill);
  font-family: var(--vd-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--vd-bg-raised);
  border: 1px solid var(--vd-border);
  color: var(--vd-fg-muted);
}

.vd-rule {
  height: 1px;
  background: var(--vd-border);
  border: 0;
  margin: 0;
}

.vd-grid-bg {
  background-image:
    linear-gradient(to right, var(--vd-border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--vd-border) 1px, transparent 1px);
  background-size: 32px 32px;
}

.text-grad {
  background: var(--vd-gradient-flow);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}