/* ============================================================
   COMPONENT LAB — experiment tokens
   Cool slate surfaces · indigo / cyan / violet accents.
   Light is base scope; [data-theme="dark"] overrides.
   Migrated from the former "Components" design system.
   ============================================================ */
:root {
  /* brand ramps (theme-independent) */
  --indigo-300: #aab2ff; --indigo-400: #7c83ff; --indigo-500: #5b6cff; --indigo-600: #4a57e6; --indigo-700: #3a45bf;
  --cyan-400: #38c8de; --cyan-500: #19b0c9; --cyan-600: #1191a8;
  --violet-500: #a855f7; --violet-600: #9333ea;
  --green-500: #22c55e; --amber-500: #f59e0b; --red-500: #ef4444;

  --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* No monospace font is used in the Lab components. */
  --font-mono: var(--font-sans);

  --text-display: 3.25rem; --text-h1: 2.25rem; --text-h2: 1.625rem; --text-h3: 1.25rem; --text-h4: 1.0625rem;
  --text-base: 0.9375rem; --text-sm: 0.8125rem; --text-xs: 0.75rem; --text-2xs: 0.6875rem;
  --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700;
  --tracking-tight: -0.02em; --tracking-snug: -0.011em; --tracking-caps: 0.09em;

  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem;
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-2xl: 24px; --r-pill: 999px;
  --ease: cubic-bezier(.4,0,.2,1); --ease-out: cubic-bezier(.16,1,.3,1); --dur-fast: 130ms; --dur-base: 200ms; --dur-slow: 300ms;
}

:root, [data-theme="light"] {
  color-scheme: light;
  --bg-base: #f4f5fb; --bg-subtle: #eceef6; --surface: #ffffff; --surface-2: #f7f8fc; --surface-raised: #ffffff; --surface-hover: #f0f1f8;
  --text-strong: #14161f; --text: #2b2e3c; --text-muted: #646983; --text-subtle: #969ab4;
  --border: #e4e6f0; --border-strong: #d2d5e6;
  --primary: #565b70; --primary-hover: #41455a; --primary-fg: #fff; --primary-soft-bg: #e7e8ef; --primary-soft-fg: #41455a;
  --accent: #767b8f; --accent-soft-bg: #ebedf2; --accent-soft-fg: #565b70;
  --violet-500: #686d82; --violet-600: #565b70;
  --ring: color-mix(in srgb, var(--primary) 34%, transparent);
  --shadow-sm: 0 1px 2px rgba(20,22,40,.06), 0 2px 6px rgba(20,22,40,.05);
  --shadow-md: 0 6px 16px rgba(20,22,40,.08), 0 14px 34px rgba(20,22,40,.08);
  --shadow-lg: 0 16px 40px rgba(20,22,40,.14), 0 30px 70px rgba(20,22,40,.12);
  --shadow-pop: 0 8px 26px rgba(20,22,40,.16), 0 2px 8px rgba(20,22,40,.1);
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg-base: #0a0b12; --bg-subtle: #07080e; --surface: #14151f; --surface-2: #191b27; --surface-raised: #1c1e2b; --surface-hover: #20222f;
  --text-strong: #f2f3fa; --text: #d4d6e2; --text-muted: #9498ad; --text-subtle: #62657c;
  --border: #262838; --border-strong: #363a4e;
  --primary: #aab1c4; --primary-hover: #c7ccd9; --primary-fg: #0a0b12; --primary-soft-bg: #232636; --primary-soft-fg: #c7ccd9;
  --accent: #8a91a4; --accent-soft-bg: #20222f; --accent-soft-fg: #aab1c4;
  --violet-500: #99a0b3; --violet-600: #8a91a4;
  --ring: color-mix(in srgb, var(--primary) 50%, transparent);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow-md: 0 8px 22px rgba(0,0,0,.5), 0 16px 40px rgba(0,0,0,.45);
  --shadow-lg: 0 18px 44px rgba(0,0,0,.6), 0 36px 90px rgba(0,0,0,.55);
  --shadow-pop: 0 10px 30px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.5);
}