/* =============================================================
   shadcn/ui — Colors & Type
   Canonical "new-york-v4" style tokens. Source: shadcn-ui/ui
   apps/v4/app/globals.css. Theme-aware via the `.dark` class.
   ============================================================= */

/* ---------- Self-hosted Geist (the shadcn default) ---------- */
@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Base font + radius ---------- */
:root {
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", sans-serif;
  --font-heading: var(--font-sans);
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
    Consolas, "Liberation Mono", "Courier New", monospace;

  --radius: 0.625rem;                       /* 10px */
  --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 */
}

/* ---------- Light theme (default) ---------- */
:root {
  --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);

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

  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);

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

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

/* ---------- Dark theme ---------- */
.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);
}

/* ---------- Base body/typography defaults ---------- */
html, body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Semantic typography ---------- */
/* shadcn doesn't ship semantic h1..h6 globals; the docs/mdx use Tailwind
   utilities directly. These mirror the canonical sizes used in mdx-components. */
.text-h1, h1.shadcn {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 2.5vw + 1rem, 3rem);   /* 32 → 48 */
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--foreground);
  scroll-margin-block: 5rem;
}
.text-h2, h2.shadcn {
  font-family: var(--font-heading);
  font-size: 1.875rem;                          /* 30 */
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
  scroll-margin-block: 5rem;
}
.text-h3, h3.shadcn {
  font-family: var(--font-heading);
  font-size: 1.5rem;                            /* 24 */
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  scroll-margin-block: 5rem;
}
.text-h4, h4.shadcn {
  font-family: var(--font-heading);
  font-size: 1.25rem;                           /* 20 */
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.text-p, p.shadcn {
  font-size: 1rem;                              /* 16 */
  line-height: 1.75;
  color: var(--foreground);
}
.text-lead {
  font-size: 1.25rem;                           /* 20 */
  line-height: 1.6;
  color: var(--muted-foreground);
}
.text-large { font-size: 1.125rem; font-weight: 600; }
.text-small { font-size: 0.875rem; font-weight: 500; line-height: 1; }
.text-muted { font-size: 0.875rem; color: var(--muted-foreground); }
.text-xs    { font-size: 0.75rem; }

.text-code, code.shadcn {
  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;
}

.text-blockquote, blockquote.shadcn {
  border-left: 2px solid var(--border);
  padding-left: 1.5rem;
  font-style: italic;
  color: var(--foreground);
}

/* ---------- Spacing scale (Tailwind default) ---------- */
:root {
  --space-0: 0;
  --space-0_5: 0.125rem;  /* 2 */
  --space-1:   0.25rem;   /* 4 */
  --space-1_5: 0.375rem;  /* 6 */
  --space-2:   0.5rem;    /* 8 */
  --space-3:   0.75rem;   /* 12 */
  --space-4:   1rem;      /* 16 */
  --space-5:   1.25rem;   /* 20 */
  --space-6:   1.5rem;    /* 24 */
  --space-8:   2rem;      /* 32 */
  --space-10:  2.5rem;    /* 40 */
  --space-12:  3rem;      /* 48 */
  --space-16:  4rem;      /* 64 */
  --space-20:  5rem;      /* 80 */
  --space-24:  6rem;      /* 96 */
}

/* ---------- Shadows (Tailwind built-ins shadcn uses) ---------- */
:root {
  --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);
}

/* ---------- Focus ring (canonical shadcn pattern) ----------
   Use:  outline: none; box-shadow: 0 0 0 3px var(--ring-50);
*/
:root {
  --ring-50: color-mix(in oklab, var(--ring) 50%, transparent);
  --destructive-20: color-mix(in oklab, var(--destructive) 20%, transparent);
}

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