/* ============================================================================
   Lucha Design System — Colors & Type
   Foundation tokens, faithfully derived from shadcn/ui v4 (new-york style).
   Source: https://github.com/shadcn-ui/ui  (apps/v4/app/globals.css)

   Color space: OKLCH. The base palette is a pure neutral grayscale — there is
   NO brand hue. Color enters only via state (destructive red) and data viz
   (blue chart ramp). Personality comes from type, spacing, and restraint.
   ============================================================================ */

/* ---- Webfonts -------------------------------------------------------------
   shadcn/ui ships Geist (sans + headings) and Geist Mono.
   Loaded here from Google Fonts. If you need offline/self-hosted files,
   drop woff2s into fonts/ and swap these @imports for @font-face blocks. */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Geist+Mono:wght@100..900&display=swap");

:root {
  /* ===== Radius scale ===== */
  --radius: 0.625rem;            /* 10px — the single source radius */
  --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-full: 9999px;

  /* ===== Base neutral ramp (light) ===== */
  --background: oklch(1 0 0);              /* #ffffff pure white            */
  --foreground: oklch(0% 0 0);            /* #000000 near-black ink         */
  --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 actions        */
  --primary-foreground: oklch(0.985 0 0); /* near-white text on primary     */
  --secondary: oklch(0.97 0 0);           /* #f5f5f5 subtle fill            */
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);   /* #767676 secondary text         */
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325); /* red — destructive only       */
  --destructive-foreground: oklch(0.97 0.01 17);
  --border: oklch(0.922 0 0);             /* #e5e5e5 hairline               */
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);               /* focus ring, mid gray           */

  /* ===== Surfaces & code ===== */
  --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);

  /* ===== Data-viz blue ramp (the only chromatic family) ===== */
  --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 slots ===== */
  --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);

  /* ===== Type families ===== */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: var(--font-sans);
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ===== Type scale (rem; 1rem = 16px) ===== */
  --text-xs: 0.75rem;    /* 12 */
  --text-sm: 0.875rem;   /* 14 — default UI text */
  --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 */

  /* ===== Weights ===== */
  --weight-normal: 400;
  --weight-medium: 500;   /* labels, buttons, nav */
  --weight-semibold: 600; /* headings, card titles */
  --weight-bold: 700;

  /* ===== Elevation (shadcn shadow scale) ===== */
  --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);

  /* ===== Spacing base ===== */
  --spacing: 0.25rem; /* 4px unit; multiply for the 4/8/12/16/24/32... scale */
}

.dark {
  --background: oklch(0.145 0 0);          /* #232323-ish near-black         */
  --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 — inverts in dark   */
  --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%);            /* translucent white hairline     */
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --surface: oklch(0.2 0 0);
  --surface-foreground: oklch(0.708 0 0);
  --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);
  --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%);
}

/* ============================================================================
   Semantic element styles — apply these or copy the patterns.
   ============================================================================ */
body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
}

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

h1, .h1 {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.025em;
  line-height: 1.1;
}
h2, .h2 {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
h3, .h3 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.0125em;
  line-height: 1.2;
}
h4, .h4 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
}
p, .body {
  font-size: var(--text-sm);
  line-height: 1.6;
}
.lead {
  font-size: var(--text-lg);
  color: var(--muted-foreground);
  line-height: 1.6;
}
small, .muted {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}
code, .code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 0.85em;
}
.code-inline {
  background: var(--muted);
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
  font-size: 0.85em;
}