/* Vibewright Labs — Design System tokens (concatenated build).
   Source of truth: claude.ai/design project "vibewright-labs-design-system"
   (_ds/…/styles.css import order: fonts → colors → typography → spacing →
   radii → effects → base). Keep in sync with the design project. */

/* ── fonts.css ── */
@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");

/* ── colors.css ── */
: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.css ── */
:root {
  --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.css ── */
:root {
  --space-0: 0;
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 2.5rem;   /* 40 */
  --space-8: 3rem;     /* 48 */
  --space-9: 4rem;     /* 64 */
  --space-10: 6rem;    /* 96 */
  --space-11: 8rem;    /* 128 */

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

/* ── radii.css ── */
:root {
  --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;
  --clip-corner: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}

/* ── effects.css ── */
:root {
  --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);

  --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;

  --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);
}

/* ── base.css ── */
:root { color-scheme: dark; }
body {
  background: var(--bg-app);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--text-strong);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-bold);
  margin: 0;
}
a { color: var(--text-brand); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--accent-hover); }
::selection { background: var(--accent-soft); color: var(--text-strong); }
@keyframes vw-spin { to { transform: rotate(360deg); } }
.vw-btn[data-variant="primary"]:hover:not(:disabled) { box-shadow: var(--glow-md); transform: translateY(-1px); }
.vw-btn[data-variant="secondary"]:hover:not(:disabled) { border-color: var(--border-strong); background: var(--surface-hover); }
.vw-btn[data-variant="ghost"]:hover:not(:disabled) { background: var(--surface-hover); }
.vw-btn:active:not(:disabled) { transform: translateY(0) scale(0.985); }
.vw-iconbtn:hover:not(:disabled) { border-color: var(--border-strong); color: var(--text-strong); }
.vw-input:focus, .vw-select:focus { border-color: var(--purple-400) !important; box-shadow: 0 0 0 3px var(--ring); }
.vw-eyebrow {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  color: var(--text-brand);
}