/* ============================================================
   MCA Design System — tokens.css
   Modern / technical. Shared skeleton, swappable accent.

   Usage:
   1. Import once in your global stylesheet (top of app):
        @import "mca-design/tokens.css";
      or copy this file in and import it.
   2. Components reference the variables below (shadcn-compatible
      HSL channel format, so shadcn/ui components work unchanged).
   3. PER PROJECT: change ONE line — --accent-h / --accent-s / --accent-l
      under :root to re-skin the whole app.
   ============================================================ */

/* ---- Fonts (Google Fonts) ---- */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ============ THE ONE LINE YOU CHANGE PER PROJECT ============ */
  /* Accent hue. Default = cobalt. Swap these 3 numbers per product:
     cobalt 226 / teal 178 / violet 265 / amber 35 / lime 84 / rose 350 */
  --accent-h: 226;
  --accent-s: 92%;
  --accent-l: 58%;
  /* ============================================================ */

  /* ---- Type families ---- */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* ---- Type scale (1.250 major third) ---- */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --text-5xl: 3.75rem;
  --tracking-tight: -0.02em;   /* headings */
  --tracking-label: 0.08em;    /* mono eyebrow labels, uppercase */

  /* ---- Radius (tight, technical) ---- */
  --radius: 0.625rem;
  --radius-sm: 0.375rem;
  --radius-lg: 0.875rem;

  /* ---- Shadow language (soft, layered, low-opacity) ---- */
  --shadow-sm: 0 1px 2px hsl(222 20% 10% / 0.06);
  --shadow: 0 2px 8px hsl(222 20% 10% / 0.08), 0 1px 2px hsl(222 20% 10% / 0.06);
  --shadow-lg: 0 12px 32px hsl(222 20% 10% / 0.12), 0 2px 6px hsl(222 20% 10% / 0.06);

  /* ---- LIGHT THEME (shadcn-compatible HSL channels) ---- */
  /* Custom cool-gray neutral ramp — deliberately NOT shadcn default slate */
  --background: 220 20% 99%;
  --foreground: 222 24% 12%;

  --card: 0 0% 100%;
  --card-foreground: 222 24% 12%;
  --popover: 0 0% 100%;
  --popover-foreground: 222 24% 12%;

  --primary: 222 24% 12%;        /* near-black, ink */
  --primary-foreground: 220 20% 99%;
  --secondary: 220 16% 95%;
  --secondary-foreground: 222 20% 20%;
  --muted: 220 16% 95%;
  --muted-foreground: 220 10% 45%;

  --accent: var(--accent-h) var(--accent-s) var(--accent-l);
  --accent-foreground: 0 0% 100%;

  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;

  --border: 220 16% 90%;
  --input: 220 16% 90%;
  --ring: var(--accent-h) var(--accent-s) var(--accent-l);
}

.dark {
  --background: 224 28% 7%;
  --foreground: 220 20% 96%;

  --card: 224 24% 10%;
  --card-foreground: 220 20% 96%;
  --popover: 224 24% 10%;
  --popover-foreground: 220 20% 96%;

  --primary: 220 20% 96%;
  --primary-foreground: 224 28% 7%;
  --secondary: 222 18% 16%;
  --secondary-foreground: 220 16% 88%;
  --muted: 222 18% 16%;
  --muted-foreground: 220 12% 62%;

  --accent: var(--accent-h) var(--accent-s) calc(var(--accent-l) + 6%);
  --accent-foreground: 224 28% 7%;

  --destructive: 0 62% 55%;
  --destructive-foreground: 0 0% 100%;

  --border: 222 16% 20%;
  --input: 222 16% 20%;
  --ring: var(--accent-h) var(--accent-s) calc(var(--accent-l) + 6%);

  --shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.4);
  --shadow: 0 2px 8px hsl(0 0% 0% / 0.45), 0 1px 2px hsl(0 0% 0% / 0.3);
  --shadow-lg: 0 12px 32px hsl(0 0% 0% / 0.55), 0 2px 6px hsl(0 0% 0% / 0.35);
}

/* ---- Base element defaults ---- */
body {
  font-family: var(--font-body);
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
  line-height: 1.1;
}

/* Signature move: mono uppercase eyebrow labels.
   <span class="eyebrow">Section</span> */
.eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-size: var(--text-xs);
  font-weight: 500;
  color: hsl(var(--accent));
}

/* Numbers/data read as technical when set in mono */
.tabular { font-family: var(--font-mono); font-feature-settings: "tnum"; }