/* ============================================================
   shadcn/ui — Colors & Type
   Source: apps/v4/app/globals.css + registry/themes.ts
   Default base color: Neutral. Default radius: 0.625rem.
   All colors declared in oklch (P3 / wide gamut).
   ============================================================ */

/* ---------- Fonts (Google Fonts CDN) ---------- */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Geist+Mono:wght@100..900&family=Inter:wght@100..900&family=Lora:ital,wght@0,400..700;1,400..700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Instrument+Serif:ital@0;1&display=swap");

/* ============================================================
   BASE TOKENS — Light (:root) + Dark (.dark)
   Neutral base. One-liners for swatches live below in --shadcn-*.
   ============================================================ */
:root {
  /* Radius scale (derived from --radius) */
  --radius: 0.625rem;
  --radius-sm: calc(var(--radius) * 0.6);   /* ~6px  */
  --radius-md: calc(var(--radius) * 0.8);   /* ~8px  */
  --radius-lg: var(--radius);               /* 10px  */
  --radius-xl: calc(var(--radius) * 1.4);   /* ~14px */
  --radius-2xl: calc(var(--radius) * 1.8);  /* ~18px */
  --radius-3xl: calc(var(--radius) * 2.2);  /* ~22px */
  --radius-4xl: calc(var(--radius) * 2.6);  /* ~26px */

  /* Surfaces */
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);

  /* Roles */
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.97 0.01 17);

  /* Lines & focus */
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);

  /* Charts (default = blue scale) */
  --chart-1: oklch(0.809 0.105 251.813);
  --chart-2: oklch(0.623 0.214 259.815);
  --chart-3: oklch(0.546 0.245 262.881);
  --chart-4: oklch(0.488 0.243 264.376);
  --chart-5: oklch(0.424 0.199 265.638);

  /* Sidebar */
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);

  /* Surfaces used by docs/code blocks */
  --surface: oklch(0.98 0 0);
  --surface-foreground: var(--foreground);
  --code: var(--surface);
  --code-foreground: var(--surface-foreground);
  --code-highlight: oklch(0.96 0 0);
  --code-number: oklch(0.56 0 0);
  --selection: oklch(0.145 0 0);
  --selection-foreground: oklch(1 0 0);

  /* ---------- Typography tokens ---------- */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-heading: var(--font-sans);
  --font-serif: "Instrument Serif", "Playfair Display", ui-serif, Georgia, serif;

  /* Type scale (Tailwind-ish) */
  --text-xs: 0.75rem;     /* 12 */
  --text-sm: 0.875rem;    /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-lg: 1.125rem;    /* 18 */
  --text-xl: 1.25rem;     /* 20 */
  --text-2xl: 1.5rem;     /* 24 */
  --text-3xl: 1.875rem;   /* 30 */
  --text-4xl: 2.25rem;    /* 36 */
  --text-5xl: 3rem;       /* 48 */
  --text-6xl: 3.75rem;    /* 60 */

  /* Spacing unit — Tailwind v4 uses 0.25rem */
  --spacing: 0.25rem;

  /* Shadows — shadcn is restrained: sm for inputs/buttons, md for popovers, lg/xl for sheets */
  --shadow-xs: 0 1px 2px 0 oklch(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 oklch(0 0 0 / 0.1), 0 1px 2px -1px oklch(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px oklch(0 0 0 / 0.1), 0 2px 4px -2px oklch(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px oklch(0 0 0 / 0.1), 0 4px 6px -4px oklch(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px oklch(0 0 0 / 0.1), 0 8px 10px -6px oklch(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px oklch(0 0 0 / 0.25);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.371 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --destructive-foreground: oklch(0.58 0.22 27);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.439 0 0);
  --surface: oklch(0.2 0 0);
  --surface-foreground: oklch(0.708 0 0);
  --code: var(--surface);
  --code-foreground: var(--surface-foreground);
  --code-highlight: oklch(0.27 0 0);
  --code-number: oklch(0.72 0 0);
  --selection: oklch(0.922 0 0);
  --selection-foreground: oklch(0.205 0 0);
}

/* ============================================================
   SEMANTIC TEXT STYLES
   These match shadcn/ui typography prose (docs/mdx).
   ============================================================ */
html, body {
  font-family: var(--font-sans);
  color: var(--foreground);
  background: var(--background);
  font-feature-settings: "rlig" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--foreground);
}
h2, .h2 {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}
h3, .h3 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
h4, .h4 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
p, .p {
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--foreground);
}
.lead {
  font-size: var(--text-xl);
  line-height: 1.55;
  color: var(--muted-foreground);
}
.muted {
  font-size: var(--text-sm);
  color: var(--muted-foreground);
}
small, .small {
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1;
}
code, .code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--muted);
  color: var(--foreground);
  padding: 0.15em 0.35em;
  border-radius: var(--radius-sm);
  font-weight: 600;
}
pre {
  font-family: var(--font-mono);
  background: var(--code);
  color: var(--code-foreground);
  border-radius: var(--radius-xl);
  font-size: var(--text-sm);
  padding: 1rem 1.25rem;
  overflow-x: auto;
}
blockquote {
  border-left: 2px solid var(--border);
  padding-left: 1.5rem;
  font-style: italic;
  color: var(--foreground);
}

/* ============================================================
   SWATCH REFERENCE — Named bases + accents (for preview cards)
   These are the seven bases (neutral/stone/zinc/mauve/olive/mist/taupe)
   and the full palette of accent primaries. Light variant only.
   ============================================================ */
:root {
  /* Neutral bases (primary@205 shade shown) */
  --shadcn-neutral: oklch(0.205 0 0);
  --shadcn-stone:   oklch(0.216 0.006 56.043);
  --shadcn-zinc:    oklch(0.21 0.006 285.885);
  --shadcn-mauve:   oklch(0.212 0.019 322.12);
  --shadcn-olive:   oklch(0.228 0.013 107.4);
  --shadcn-mist:    oklch(0.218 0.008 223.9);
  --shadcn-taupe:   oklch(0.214 0.009 43.1);

  /* Accent primaries (light mode primary shade) */
  --shadcn-amber:    oklch(0.555 0.163 48.998);
  --shadcn-blue:     oklch(0.488 0.243 264.376);
  --shadcn-cyan:     oklch(0.52 0.105 223.128);
  --shadcn-emerald:  oklch(0.508 0.118 165.612);
  --shadcn-fuchsia:  oklch(0.518 0.253 323.949);
  --shadcn-green:    oklch(0.527 0.154 150.069);
  --shadcn-indigo:   oklch(0.457 0.24 277.023);
  --shadcn-lime:     oklch(0.841 0.238 128.85);
  --shadcn-orange:   oklch(0.553 0.195 38.402);
  --shadcn-pink:     oklch(0.525 0.223 3.958);
  --shadcn-purple:   oklch(0.496 0.265 301.924);
  --shadcn-red:      oklch(0.505 0.213 27.518);
  --shadcn-rose:     oklch(0.514 0.222 16.935);
  --shadcn-sky:      oklch(0.5 0.134 242.749);
  --shadcn-teal:     oklch(0.511 0.096 186.391);
  --shadcn-violet:   oklch(0.491 0.27 292.581);
  --shadcn-yellow:   oklch(0.852 0.199 91.936);
}