/* Lighthouse Design Tokens — single source of truth
   Import via <link rel="stylesheet" href="/static/tokens.css"> */

/* Redesign type system — load on every page that uses tokens.css */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

@font-face {
  font-family: 'Garet';
  src: url('/static/garet-book.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Garet';
  src: url('/static/garet-heavy.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color — Brand */
  --accent: #E8A830;
  --accent-purple: #8B5CF6;
  --accent-green: #22c55e;
  --accent-yellow: #eab308;
  --accent-gold: #fbbf24;
  --accent-orange: #f97316;
  --accent-red: #ef4444;
  --accent-blue: #3b82f6;

  /* Redesign palette — motion-graphic language (Abyss black, one Beacon-Gold accent).
     These name the new design language directly so ported components read cleanly;
     they coexist with the --accent* system above (charts colour off --accent*). */
  --gold: #E8A830;        /* THE accent — primary metric, active state, progress */
  --goldtip: #FBBF24;     /* hotter highlight — donut/sparkline head dots, foam caps */
  --green-signal: #22C55E;
  --red-warning: #EF4444;
  --blue-tide: #3B82F6;
  --violet: #8B5CF6;      /* LLM / model platform tag */
  --coral: #FF5A36;       /* "You" = the customer's own brand */
  --rival: #7A8699;       /* competitor / non-you bars */
  --foam: #F0F6FC;        /* primary text */
  --mist: #94A3B8;        /* labels, secondary text */
  --dim: #5B6675;         /* tertiary / muted */

  /* Redesign surfaces (subtle lifts over Abyss) */
  --abyss: #06080C;
  --ink: #080B11;
  --deepsea: #0B1B2E;
  --panel: #0C1622;
  --panel2: #101D2C;
  --hull: #1B2636;        /* hairlines, borders, tracks */
  --hull2: #28384C;

  /* Redesign type system — Space Grotesk (display/UI) + IBM Plex Mono (numbers/data) */
  --font-display: 'Space Grotesk', 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* Color — Surfaces */
  --bg-primary: #06080c;
  --bg-secondary: #0d1117;
  --bg-tertiary: #161b22;
  --bg-card: #1c2128;

  /* Color — Text */
  --text-primary: #f0f6fc;
  --text-secondary: #9ba4ae;
  --text-muted: #929BA6;

  /* Color — Borders */
  --border: #30363d;
  --border-subtle: rgba(255, 255, 255, 0.04);

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.15);
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.15);
  --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 1px 2px rgba(0,0,0,0.25), 0 4px 12px rgba(0,0,0,0.15);
  --shadow-card-hover: 0 4px 8px rgba(0,0,0,0.3), 0 12px 32px rgba(0,0,0,0.25);
  --shadow-glow: 0 0 60px rgba(232, 168, 48, 0.12);
  --shadow-focus: 0 0 0 3px rgba(232,168,48,0.15);

  /* Border radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 100px;

  /* Spacing */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-7: 32px; --space-8: 40px; --space-9: 48px;

  /* Motion */
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --duration-fast: 0.15s;
  --duration-normal: 0.2s;
  --duration-slow: 0.3s;

  /* Short aliases (used by marketing pages) */
  --bg: var(--bg-primary);
  --bg-s: var(--bg-secondary);
  --bg-t: var(--bg-tertiary);
  --text: var(--text-primary);
  --text-s: var(--text-secondary);
  --text-m: var(--text-muted);
  --green: var(--accent-green);
  --gold: var(--accent-gold);
  --red: var(--accent-red);
  --blue: var(--accent-blue);
  --purple: var(--accent-purple);
  --border-s: var(--border-subtle);
}

/* Light Mode */
[data-theme="light"] {
  --accent: #8B5A10;
  --accent-purple: #9333ea;
  --accent-green: #16a34a;
  --accent-yellow: #ca8a04;
  --accent-gold: #d97706;
  --accent-orange: #ea580c;
  --accent-red: #dc2626;
  --accent-blue: #2563eb;

  --bg-primary: #ffffff;
  --bg-secondary: #f6f8fa;
  --bg-tertiary: #eaeef2;
  --bg-card: #ffffff;

  --text-primary: #1f2328;
  --text-secondary: #484f58;
  --text-muted: #636c76;

  --border: #d1d9e0;
  --border-subtle: rgba(0, 0, 0, 0.04);

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05);
  --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
  --shadow-card: 0 1px 2px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.08);
  --shadow-card-hover: 0 4px 8px rgba(0,0,0,0.08), 0 12px 32px rgba(0,0,0,0.06);
  --shadow-glow: 0 0 60px rgba(139, 90, 16, 0.1);
  --shadow-focus: 0 0 0 3px rgba(139,90,16,0.12);
}