/* Vibewright Labs — Design tokens
   Imported from the Vibewright Labs design system (claude.ai/design).
   Dark-first. Neon purple signature over deep charcoal. */

/* Webfonts — Chakra Petch (display) / Barlow (body) / JetBrains Mono (data) */
@import url("https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,400;0,500;0,600;0,700;1,600;1,700&family=Barlow:ital,wght@0,400;0,500;0,600;0,700;1,500&family=JetBrains+Mono:wght@400;500;700&display=swap");

:root {
  /* ── Neutrals / ink (dark-first surface ramp) ── */
  --black: #08080a;
  --ink-950: #0c0c0f;   /* app backdrop */
  --ink-900: #111116;   /* base surface */
  --ink-850: #16161c;   /* raised surface */
  --ink-800: #1c1c23;   /* card */
  --ink-700: #26262f;   /* elevated / hover surface */
  --ink-600: #33333e;   /* strong border */
  --ink-500: #45454f;   /* border / divider */
  --ink-400: #5c5c68;   /* disabled fg */
  --ink-300: #7d7d8a;   /* muted text */
  --ink-200: #a6a6b3;   /* secondary text */
  --ink-100: #d4d4dd;   /* body text */
  --ink-050: #ececf1;   /* high-emphasis text */
  --white: #ffffff;

  /* ── Brand purple (signature) ── */
  --purple-050: #f4e9ff;
  --purple-100: #e3c6ff;
  --purple-200: #cd97ff;
  --purple-300: #b866ff;
  --purple-400: #a63dff;
  --purple-500: #9412f0;  /* primary brand */
  --purple-600: #7d0ecc;
  --purple-700: #63099e;
  --purple-800: #470670;
  --magenta-500: #c724f5; /* secondary neon (logo highlight) */
  --magenta-400: #d955ff;

  /* ── Racing-flag signal palette (semantic source of truth) ── */
  --flag-green: #2fe36a;   /* clear / go */
  --flag-white: #f2f2f5;   /* final lap */
  --flag-yellow: #ffce1f;  /* caution */
  --flag-red: #ff2d55;     /* danger / stop */
  --flag-blue: #2f80ff;    /* faster car approaching */
  --flag-black: #0c0c0f;   /* penalty */

  /* ── Semantic aliases ── */
  --bg-app: var(--ink-950);
  --bg-base: var(--ink-900);
  --bg-raised: var(--ink-850);
  --surface-card: var(--ink-800);
  --surface-hover: var(--ink-700);
  --surface-input: var(--ink-850);

  --border-subtle: var(--ink-600);
  --border-default: var(--ink-500);
  --border-strong: var(--ink-400);
  --border-brand: var(--purple-500);

  --text-strong: var(--ink-050);
  --text-body: var(--ink-100);
  --text-muted: var(--ink-300);
  --text-disabled: var(--ink-400);
  --text-on-brand: var(--white);
  --text-brand: var(--purple-300);

  --accent: var(--purple-500);
  --accent-hover: var(--purple-400);
  --accent-active: var(--purple-600);
  --accent-soft: rgba(148, 18, 240, 0.16);

  --success: var(--flag-green);
  --warning: var(--flag-yellow);
  --danger: var(--flag-red);
  --info: var(--flag-blue);

  /* focus ring */
  --ring: rgba(166, 61, 255, 0.55);

  /* ── Typography ── */
  --font-display: "Chakra Petch", "Barlow", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --fs-display: 4.5rem;   /* 72 */
  --fs-h1: 3rem;          /* 48 */
  --fs-h2: 2.25rem;       /* 36 */
  --fs-h3: 1.625rem;      /* 26 */
  --fs-h4: 1.25rem;       /* 20 */
  --fs-lg: 1.125rem;      /* 18 */
  --fs-body: 1rem;        /* 16 */
  --fs-sm: 0.875rem;      /* 14 */
  --fs-xs: 0.75rem;       /* 12 */
  --fs-micro: 0.6875rem;  /* 11 — labels / eyebrows */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.06em;
  --ls-wider: 0.14em;

  /* ── Spacing & sizing (4px base grid) ── */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 6rem;
  --space-11: 8rem;

  --container-max: 1200px;
  --container-wide: 1440px;
  --gutter: var(--space-5);
  --control-h: 40px;
  --control-h-sm: 32px;
  --control-h-lg: 48px;

  /* ── Radii ── */
  --radius-none: 0;
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;    /* default: buttons, inputs */
  --radius-lg: 12px;   /* cards */
  --radius-xl: 18px;   /* large panels / modals */
  --radius-pill: 999px;
  /* Signature angled clip — used sparingly on hero cards & badges */
  --clip-corner: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);

  /* ── Shadows / neon glows ── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.45);
  --shadow-lg: 0 12px 34px rgba(0,0,0,0.55);
  --shadow-xl: 0 24px 60px rgba(0,0,0,0.6);

  --glow-sm: 0 0 0 1px rgba(148,18,240,0.4), 0 0 12px rgba(148,18,240,0.35);
  --glow-md: 0 0 18px rgba(148,18,240,0.45), 0 0 44px rgba(148,18,240,0.25);
  --glow-lg: 0 0 30px rgba(166,61,255,0.55), 0 0 80px rgba(148,18,240,0.35);
  --glow-magenta: 0 0 22px rgba(199,36,245,0.5), 0 0 60px rgba(199,36,245,0.3);
  --glow-text: 0 0 14px rgba(166,61,255,0.55);

  --glow-green: 0 0 16px rgba(47,227,106,0.45);
  --glow-yellow: 0 0 16px rgba(255,206,31,0.45);
  --glow-red: 0 0 16px rgba(255,45,85,0.5);

  /* ── Motion — quick, mechanical. No bounce. ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 340ms;

  /* ── Gradients ── */
  --grad-brand: linear-gradient(90deg, var(--purple-500), var(--magenta-500));
  --grad-brand-soft: linear-gradient(135deg, rgba(148,18,240,0.18), rgba(199,36,245,0.06));
  --hairline: linear-gradient(90deg, transparent, var(--purple-500), var(--magenta-500), transparent);

  color-scheme: dark;
}