/* ============================================
   MR VERO — SHARED DESIGN TOKENS
   Cool-black, amber accent, geometric + mono
   ============================================ */

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

:root {
  /* ---- COOL BLACK SCALE (oklch, subtle blue undertone) ---- */
  --ink-000: oklch(0.08 0.010 250);   /* deepest */
  --ink-050: oklch(0.11 0.012 250);
  --ink-100: oklch(0.14 0.012 250);   /* canvas */
  --ink-150: oklch(0.17 0.013 250);
  --ink-200: oklch(0.21 0.013 250);   /* surface */
  --ink-300: oklch(0.27 0.014 250);   /* raised */
  --ink-400: oklch(0.35 0.014 250);   /* hairline strong */
  --ink-500: oklch(0.48 0.013 250);   /* muted text */
  --ink-600: oklch(0.62 0.012 250);
  --ink-700: oklch(0.75 0.010 250);   /* secondary text */
  --ink-800: oklch(0.88 0.008 250);
  --ink-900: oklch(0.96 0.006 250);   /* primary text */
  --ink-950: oklch(0.99 0.004 250);

  /* ---- HAIRLINES ---- */
  --line-faint: color-mix(in oklch, var(--ink-900) 6%, transparent);
  --line: color-mix(in oklch, var(--ink-900) 10%, transparent);
  --line-strong: color-mix(in oklch, var(--ink-900) 18%, transparent);

  /* ---- VERO GOLD (primary accent — antenna, ears) ---- */
  --gold-100: oklch(0.94 0.04 88);
  --gold-300: oklch(0.86 0.09 85);
  --gold-500: oklch(0.80 0.13 82);   /* primary accent */
  --gold-600: oklch(0.72 0.14 78);
  --gold-700: oklch(0.62 0.13 74);
  --gold-glow: color-mix(in oklch, var(--gold-500) 40%, transparent);

  /* ---- VERO BLUE (secondary — casing, eyes) ---- */
  --blue-100: oklch(0.88 0.06 260);
  --blue-300: oklch(0.72 0.14 262);
  --blue-500: oklch(0.58 0.19 265);  /* secondary accent */
  --blue-600: oklch(0.48 0.21 266);
  --blue-700: oklch(0.38 0.18 266);
  --blue-glow: color-mix(in oklch, var(--blue-500) 40%, transparent);

  /* ---- SEMANTIC ---- */
  --bg: var(--ink-100);
  --bg-elev-1: var(--ink-150);
  --bg-elev-2: var(--ink-200);
  --bg-elev-3: var(--ink-300);
  --fg: var(--ink-900);
  --fg-muted: var(--ink-700);
  --fg-faint: var(--ink-500);
  --accent: var(--gold-500);
  --accent-2: var(--blue-500);
  --accent-ink: var(--ink-000);

  /* legacy alias (kept so partial markup keeps working) */
  --amber-100: var(--gold-100);
  --amber-300: var(--gold-300);
  --amber-500: var(--gold-500);
  --amber-600: var(--gold-600);
  --amber-700: var(--gold-700);
  --amber-glow: var(--gold-glow);

  /* status */
  --ok: oklch(0.78 0.14 155);
  --warn: oklch(0.80 0.14 85);
  --err: oklch(0.68 0.18 25);
  --info: oklch(0.72 0.10 230);

  /* ---- TYPE ---- */
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'JetBrains Mono', monospace;

  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 28px;
  --fs-3xl: 40px;
  --fs-4xl: 56px;
  --fs-5xl: 76px;
  --fs-6xl: 112px;

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-body: 1.5;

  --tracking-wide: 0.08em;
  --tracking-micro: 0.14em;

  /* ---- SPACING (4px base) ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* ---- RADIUS ---- */
  --r-xs: 2px;
  --r-sm: 3px;   /* default */
  --r-md: 5px;
  --r-lg: 8px;
  --r-pill: 999px;

  /* ---- MOTION ---- */
  --e-out: cubic-bezier(0.2, 0.6, 0.2, 1);
  --e-in-out: cubic-bezier(0.6, 0.0, 0.2, 1);
  --t-fast: 120ms;
  --t-base: 180ms;
  --t-slow: 320ms;

  /* ---- ELEVATION ---- */
  --shadow-1: 0 1px 0 0 var(--line-faint) inset;
  --shadow-2: 0 1px 2px rgba(0,0,0,0.3), 0 0 0 1px var(--line-faint);
  --shadow-3: 0 8px 24px rgba(0,0,0,0.4), 0 0 0 1px var(--line);
  --shadow-glow: 0 0 0 1px var(--amber-500), 0 0 24px -4px var(--amber-glow);
}

/* ---- BASE RESET ---- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01', 'ss02', 'cv11';
}
body {
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

/* Scrollbar — thin cool */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink-050); }
::-webkit-scrollbar-thumb {
  background: var(--ink-300);
  border: 2px solid var(--ink-050);
  border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-400); }

/* ---- UTILITIES ---- */
.mono { font-family: var(--font-mono); font-feature-settings: 'ss01'; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--fg-faint);
}
.hairline { border: 1px solid var(--line); }
.hairline-b { border-bottom: 1px solid var(--line); }
.hairline-t { border-top: 1px solid var(--line); }

/* grain overlay — optional backdrop */
.grain::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  z-index: 9999;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* stagger-in */
@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.rise { animation: rise 0.5s var(--e-out) both; }
.delay-1 { animation-delay: 0.05s; }
.delay-2 { animation-delay: 0.10s; }
.delay-3 { animation-delay: 0.15s; }
.delay-4 { animation-delay: 0.20s; }
.delay-5 { animation-delay: 0.25s; }
.delay-6 { animation-delay: 0.30s; }