/* ==========================================================================
   Noturna — Design Tokens
   Derived from the Astari / AllScriber reference funnel teardown.
   Single source of truth for colour, type, spacing, radius and elevation.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     Brand palette
     The reference uses one confident blue for every actionable element,
     near-black for headlines, and cool greys for option/neutral surfaces.
     --------------------------------------------------------------------- */
  --blue-50: #eef3ff;
  --blue-100: #e0e9ff;
  --blue-150: #d7e2ff;
  --blue-200: #c7d6fe;
  --blue-300: #a5bcfa;
  --blue-400: #7392f8;
  --blue-500: #4c6fff;
  --blue-600: #3b5cf6; /* primary */
  --blue-700: #2f49d1;
  --blue-800: #2739a5;
  --blue-900: #1e2b78;

  --ink-900: #0a1020;
  --ink-800: #111827;
  --ink-700: #2c3444;
  --ink-600: #4b5563;
  --ink-500: #6b7280;
  --ink-400: #9ca3af;
  --ink-300: #c4c9d2;

  --gray-25: #fbfbfd;
  --gray-50: #f7f8fa;
  --gray-100: #f3f4f6;
  --gray-150: #eceef2;
  --gray-200: #e5e7eb;
  --gray-300: #d5d8de;

  --white: #ffffff;

  /* Semantic / status */
  --green-50: #dcfce7;
  --green-100: #c7f5d4;
  --green-500: #22c55e;
  --green-600: #16a34a;
  --green-700: #15803d;

  --red-50: #fee2e2;
  --red-100: #fdd4d4;
  --red-500: #ef4444;
  --red-600: #dc2626;

  --amber-50: #fef3c7;
  --amber-100: #fde9c8;
  --amber-500: #f0a020;
  --amber-600: #b45309;

  --violet-500: #8b5cf6;

  /* ---------------------------------------------------------------------
     Semantic aliases — components should use these, not the raw ramp.
     --------------------------------------------------------------------- */
  --bg-app: var(--white);
  --bg-subtle: var(--gray-50);
  --bg-tint: var(--blue-50);
  --bg-inset: var(--gray-100);

  --fg-strong: var(--ink-900);
  --fg-default: var(--ink-800);
  --fg-muted: var(--ink-500);
  --fg-faint: var(--ink-400);

  --border-subtle: var(--gray-200);
  --border-strong: var(--gray-300);
  --border-brand: var(--blue-200);

  --accent: var(--blue-600);
  --accent-hover: var(--blue-700);
  --accent-soft: var(--blue-50);
  --accent-soft-border: var(--blue-150);

  /* ---------------------------------------------------------------------
     Typography
     SF Pro / Inter-like neutral grotesque. Tight tracking on display sizes.
     --------------------------------------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
    Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --text-2xs: 0.6875rem; /* 11 */
  --text-xs: 0.75rem; /* 12 */
  --text-sm: 0.8125rem; /* 13 */
  --text-base: 0.9375rem; /* 15 */
  --text-md: 1rem; /* 16 */
  --text-lg: 1.0625rem; /* 17 */
  --text-xl: 1.25rem; /* 20 */
  --text-2xl: 1.5rem; /* 24 */
  --text-3xl: 1.75rem; /* 28 */
  --text-4xl: 2.125rem; /* 34 */
  --text-5xl: 2.625rem; /* 42 */
  --text-6xl: 3.25rem; /* 52 */

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.45;
  --leading-relaxed: 1.6;

  --tracking-tight: -0.022em;
  --tracking-tighter: -0.032em;
  --tracking-wide: 0.06em;
  --tracking-wider: 0.12em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* ---------------------------------------------------------------------
     Space (4px base) and layout
     --------------------------------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-7: 1.75rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-14: 3.5rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;

  --page-gutter: 1.25rem;
  --funnel-width: 30rem; /* 480 — the reference is a phone-first funnel */
  --app-width: 72rem;
  --prose-width: 44rem;

  /* ---------------------------------------------------------------------
     Radii — everything is generously rounded in the reference.
     --------------------------------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;
  --r-2xl: 28px;
  --r-3xl: 34px;
  --r-full: 999px;

  /* ---------------------------------------------------------------------
     Elevation
     --------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(10, 16, 32, 0.04);
  --shadow-sm: 0 1px 3px rgba(10, 16, 32, 0.06), 0 1px 2px rgba(10, 16, 32, 0.04);
  --shadow-md: 0 4px 14px rgba(10, 16, 32, 0.07);
  --shadow-lg: 0 12px 32px rgba(10, 16, 32, 0.1);
  --shadow-xl: 0 24px 60px rgba(10, 16, 32, 0.14);
  --shadow-brand: 0 10px 26px rgba(59, 92, 246, 0.32);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ---------------------------------------------------------------------
     Motion
     --------------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 380ms;

  /* Focus ring */
  --ring: 0 0 0 3px rgba(59, 92, 246, 0.28);

  --z-sticky: 90;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
}

/* Dark mode is shipped as an opt-in for the workspace (long recording
   sessions at night), not for the marketing funnel. */
[data-theme="dark"] {
  --bg-app: #0d1117;
  --bg-subtle: #11161f;
  --bg-tint: #141b2b;
  --bg-inset: #161c27;

  --fg-strong: #f1f4f9;
  --fg-default: #e2e7f0;
  --fg-muted: #98a1b2;
  --fg-faint: #6b7484;

  --border-subtle: #232a37;
  --border-strong: #2e3647;
  --border-brand: #2b3a68;

  --accent: #6d88ff;
  --accent-hover: #8ba0ff;
  --accent-soft: #16203a;
  --accent-soft-border: #26335a;

  --gray-50: #11161f;
  --gray-100: #161c27;
  --gray-200: #232a37;

  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
}