/* =========================================================================
   shadcn/ui — Colors & Type Foundation
   Source: https://github.com/shadcn-ui/ui — apps/v4/app/globals.css
   Style: new-york-v4 (the default v4 distribution)
   ========================================================================= */

/* -------- Fonts (Geist via Google Fonts) ---------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Geist+Mono:wght@100..900&display=swap");

:root {
  /* ---------- Type families ----------------------------------------------- */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-heading: var(--font-sans); /* shadcn uses Geist for headings too */
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
    Consolas, "Liberation Mono", "Courier New", monospace;

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

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* ---------- Radii (driven from --radius like shadcn does) --------------- */
  --radius: 0.625rem;                          /* 10px — the source of truth */
  --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 */

  /* ---------- Spacing (Tailwind v4 — 0.25rem base unit) ------------------- */
  --spacing: 0.25rem;

  /* ---------- Shadows (deliberately quiet) -------------------------------- */
  --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

  /* =========================================================================
     COLORS — Light theme ("new-york-v4")
     Pure white surfaces, near-black ink, neutral grays. No tint.
     ========================================================================= */
  --background: oklch(1 0 0);                       /* #ffffff */
  --foreground: oklch(0% 0 0);                      /* #000000 */

  --card: oklch(1 0 0);
  --card-foreground: oklch(0% 0 0);

  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0% 0 0);

  --primary: oklch(0% 0 0);                         /* black */
  --primary-foreground: oklch(0.985 0 0);           /* ~#fafafa */

  --secondary: oklch(0.97 0 0);                     /* zinc-100ish */
  --secondary-foreground: oklch(0.205 0 0);         /* near-black */

  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);             /* zinc-500ish */

  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);

  --destructive: oklch(0.577 0.245 27.325);         /* red */
  --destructive-foreground: oklch(0.97 0.01 17);

  --border: oklch(0.922 0 0);                       /* zinc-200 */
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);                         /* focus ring */

  /* Chart palette — defaults to a blue scale */
  --chart-1: oklch(0.809 0.105 251.813);            /* blue-300 */
  --chart-2: oklch(0.623 0.214 259.815);            /* blue-500 */
  --chart-3: oklch(0.546 0.245 262.881);            /* blue-600 */
  --chart-4: oklch(0.488 0.243 264.376);            /* blue-700 */
  --chart-5: oklch(0.424 0.199 265.638);            /* blue-800 */

  /* Sidebar surface (slightly off-white) */
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0% 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);

  /* Surface tokens for code blocks, soft sections */
  --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% 0 0);
  --selection-foreground: oklch(1 0 0);
}

/* =========================================================================
   COLORS — Dark theme
   Near-black canvas, off-white ink. Borders use white@10% for that
   recognizable shadcn frosted feel.
   ========================================================================= */
.dark {
  --background: oklch(0.145 0 0);                   /* ~#252525 */
  --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);                      /* light gray button */
  --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 TYPE — what to reach for instead of hand-rolling sizes.
   shadcn's type is unfussy: tight headings, sm body, mono for code.
   ========================================================================= */
html, body {
  font-family: var(--font-sans);
  background: var(--background);
  color: var(--foreground);
  font-feature-settings: "rlig" 1, "calt" 1;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, .h1 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 1.6rem + 2vw, 3.75rem);   /* 32–60 */
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

h4, .h4 {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.lead {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--muted-foreground);
  text-wrap: pretty;
}

p, .p {
  font-family: var(--font-sans);
  font-size: 0.875rem;        /* shadcn body = text-sm */
  line-height: 1.6;
  color: var(--foreground);
  text-wrap: pretty;
}

.muted {
  color: var(--muted-foreground);
}

small, .small {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

code, .code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.85em;
  font-weight: 400;
  background: var(--code);
  color: var(--code-foreground);
  padding: 0.15em 0.35em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

pre {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.55;
  background: var(--code);
  color: var(--code-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 1rem 1.25rem;
  overflow: auto;
}

a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 4px;
}

a:hover {
  text-decoration: underline;
}

::selection {
  background: var(--selection);
  color: var(--selection-foreground);
}

/* Focus ring — the shadcn signature: 3px ring at 50% opacity */
:where(button, a, input, select, textarea, [role="button"]):focus-visible {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
}