/* Voco — Colors & Type (canonical design tokens)
 * Source of truth: docs/voco-design-system/project/colors_and_type.css
 * Import on every surface: <link rel="stylesheet" href="/brand/tokens.css" />
 * Monochrome-first, one accent for CTAs/trust states.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Brand (monochrome) */
  --voco-black: #0A0A0A;
  --voco-white: #FFFFFF;
  --graphite:   #1A1A1A;
  --slate:      #6B6B6B;
  --line:       #E5E5E5;
  --surface:    #FAFAFA;

  /* Accent */
  --signal:     #3B82F6;
  --signal-2:   #2563EB;
  --live-green: #10B981;
  --amber:      #F59E0B;
  --alert:      #EF4444;

  /* Landing page (dark glass variant, marketing only) */
  --lp-bg:       #050D1A;
  --lp-elevated: #0C1929;
  --lp-card:     rgba(255,255,255,0.04);
  --lp-border:   rgba(255,255,255,0.06);
  --lp-indigo:   #6366F1;
  --lp-cyan:     #06B6D4;
  --lp-amber:    #F59E0B;
  --lp-text:     #F8FAFC;
  --lp-muted:    #94A3B8;

  /* Dashboard (shipped dark variant, purple-accented) */
  --dash-bg:       #0A0A0F;
  --dash-panel:    #18181B;
  --dash-line:     #27272A;
  --dash-line-2:   #3F3F46;
  --dash-text:     #E4E4E7;
  --dash-muted:    #A1A1AA;
  --dash-dim:      #71717A;
  --dash-purple:   #7C3AED;
  --dash-purple-2: #A78BFA;
  --dash-purple-3: #6D28D9;
  --dash-success:  #6EE7B7;
  --dash-success-bg: #064E3B;
  --dash-error:    #FCA5A5;
  --dash-error-bg: #7F1D1D;
  --dash-warn:     #FDE68A;
  --dash-warn-bg:  #713F12;
  --dash-info:     #93C5FD;
  --dash-info-bg:  #1E3A5F;

  /* Semantic roles — default light product chrome */
  --fg-1: var(--voco-black);
  --fg-2: var(--graphite);
  --fg-3: var(--slate);
  --bg-1: var(--voco-white);
  --bg-2: var(--surface);
  --border: var(--line);

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --size-display: 4.5rem;
  --size-h1:      3rem;
  --size-h2:      2.25rem;
  --size-h3:      1.5rem;
  --size-h4:      1.125rem;
  --size-body-lg: 1.125rem;
  --size-body:    1rem;
  --size-sm:      0.875rem;
  --size-caption: 0.75rem;

  --lh-hero:  1.1;
  --lh-title: 1.2;
  --lh-body:  1.5;
  --lh-long:  1.6;

  --track-tight: -0.02em;
  --track-wide:   0.08em;

  /* Radii & elevation */
  --radius-sm:   6px;
  --radius:      8px;
  --radius-md:  10px;
  --radius-lg:  12px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-lift: 0 4px 12px rgba(0,0,0,0.06);
  --focus-ring:  0 0 0 2px var(--voco-white), 0 0 0 4px var(--signal);

  /* Spacing (4pt baseline) */
  --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:128px;
}

/* Base element styles (opt-in; surfaces may override) */
.voco-base body,
body.voco-base {
  font-family: var(--font-sans);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.voco-base h1, .voco-base h2, .voco-base h3, .voco-base h4 {
  color: var(--fg-1);
  font-family: var(--font-sans);
  letter-spacing: var(--track-tight);
  line-height: var(--lh-title);
  font-weight: 600;
}
.voco-base h1 { font-size: var(--size-h1); font-weight: 700; line-height: var(--lh-hero); }
.voco-base h2 { font-size: var(--size-h2); }
.voco-base h3 { font-size: var(--size-h3); }
.voco-base h4 { font-size: var(--size-h4); }

.voco-base p  { font-size: var(--size-body); color: var(--fg-2); }
.voco-base small { font-size: var(--size-sm); color: var(--fg-3); }

.voco-base code, .voco-base kbd, .voco-base pre, .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.caption {
  font-size: var(--size-caption);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-3);
}

.display {
  font-size: var(--size-display);
  font-weight: 700;
  line-height: var(--lh-hero);
  letter-spacing: var(--track-tight);
  color: var(--fg-1);
}

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}