/* Passu AI Design System — colors_and_type.css
 * Foundation tokens lifted from frontend/app/globals.css.
 * Shadcn "new-york" preset, neutral=zinc base (oklch greys),
 * with a custom 15-step "palette" scale used for charts /
 * sector breakdowns / data viz: blue 1-8, slate/stone bridge 9-10,
 * orange 11-15.
 */

/* Local @font-face removed for bundling — Inter + Fira Code load from Google Fonts in the host HTML. */

:root {
  /* ── Radii ────────────────────────────────────────────────────── */
  --radius: 0.625rem;            /* 10px — primary card / button radius */
  --radius-sm: calc(var(--radius) - 4px);  /* 6px */
  --radius-md: calc(var(--radius) - 2px);  /* 8px */
  --radius-lg: var(--radius);              /* 10px */
  --radius-xl: 1rem;                       /* 16px — auth card, large cards */
  --radius-2xl: 1.25rem;

  /* ── Neutral / surface (light) ────────────────────────────────── */
  --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);                 /* near-black */
  --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);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --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);

  /* ── Status / semantic (used in product) ──────────────────────── */
  --status-success-fg: #15803d;       /* green-700 — favorable change */
  --status-success-bg: #f0fdf4;       /* green-50 */
  --status-success-border: #16a34a;   /* green-600 — IG ratings border */
  --status-warning-fg: #c2410c;       /* orange-700 — crossover/HY-edge */
  --status-warning-bg: #fff7ed;       /* orange-50 */
  --status-warning-border: #f97316;   /* orange-500 */
  --status-danger-fg: #b91c1c;        /* red-700 — deep HY */
  --status-danger-bg: #fef2f2;        /* red-50 */
  --status-danger-border: #dc2626;    /* red-600 */
  --status-amber: #f59e0b;            /* amber-500 — "today" sun icon */

  /* ── 15-step data palette: blues → bridge → oranges ───────────── */
  --palette-1: #1e3a6e;   --palette-1-text: #c2d4f0;  --palette-1-tint: #c2d4f0;
  --palette-2: #2b5090;   --palette-2-text: #d0e0f5;  --palette-2-tint: #d0e0f5;
  --palette-3: #3766aa;   --palette-3-text: #daeafa;  --palette-3-tint: #daeafa;
  --palette-4: #4574b8;   --palette-4-text: #ffffff;  --palette-4-tint: #d8e4f4;
  --palette-5: #5b8bd0;   --palette-5-text: #ffffff;  --palette-5-tint: #dee9f6;
  --palette-6: #6a9be0;   --palette-6-text: #ffffff;  --palette-6-tint: #e4eff9;
  --palette-7: #90b8f0;   --palette-7-text: #2a4d78;  --palette-7-tint: #ebf2fc;
  --palette-8: #a8cbf5;   --palette-8-text: #1e3a6e;  --palette-8-tint: #f0f6fd;
  --palette-9: #7c8b9a;   --palette-9-text: #ffffff;  --palette-9-tint: #e8eaed;
  --palette-10: #a08870;  --palette-10-text: #ffffff; --palette-10-tint: #ede8e2;
  --palette-11: #f4be8e;  --palette-11-text: #6b3a10; --palette-11-tint: #fdf0e2;
  --palette-12: #f4a36c;  --palette-12-text: #ffffff; --palette-12-tint: #fdebd8;
  --palette-13: #ee9a5a;  --palette-13-text: #ffffff; --palette-13-tint: #fce6d0;
  --palette-14: #d4794a;  --palette-14-text: #ffffff; --palette-14-tint: #f8ddd0;
  --palette-15: #b05c2e;  --palette-15-text: #ffe8d4; --palette-15-tint: #f2d4c4;

  /* ── Type scale — Inter sans + Fira Code mono ─────────────────── */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Fira Code', ui-monospace, 'SF Mono', Menlo, monospace;

  --text-2xs: 10px;     /* sidebar sublabels, tiny meta */
  --text-xs: 12px;      /* meta, kbd, badges, sidebar */
  --text-sm: 14px;      /* body in dense UI */
  --text-base: 16px;    /* default */
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;     /* page H1 (text-2xl font-semibold) */
  --text-3xl: 30px;
  --text-4xl: 36px;
  --text-5xl: 48px;

  /* Section eyebrows in product use this exact spec */
  --eyebrow-size: 12px;
  --eyebrow-tracking: 0.15em;
  --eyebrow-weight: 500;

  /* ── Shadows (shadcn xs / sm + softer card) ───────────────────── */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.06);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05);

  /* ── Spacing (tailwind defaults — for reference) ──────────────── */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px;
}

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

  --status-success-fg: #4ade80;
  --status-warning-fg: #fb923c;
  --status-danger-fg: #f87171;
}

/* ── Semantic typography roles ─────────────────────────────────── */
.ds-h1 { font: 600 var(--text-2xl)/1.25 var(--font-sans); letter-spacing: -0.01em; color: var(--foreground); }
.ds-h2 { font: 600 var(--text-xl)/1.3  var(--font-sans); letter-spacing: -0.005em; color: var(--foreground); }
.ds-h3 { font: 600 var(--text-lg)/1.35 var(--font-sans); color: var(--foreground); }
.ds-body { font: 400 var(--text-sm)/1.5 var(--font-sans); color: var(--foreground); }
.ds-body-lg { font: 400 var(--text-base)/1.55 var(--font-sans); color: var(--foreground); }
.ds-meta { font: 400 var(--text-sm)/1.4 var(--font-sans); color: var(--muted-foreground); }
.ds-eyebrow {
  font: var(--eyebrow-weight) var(--eyebrow-size)/1.2 var(--font-sans);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.ds-kbd {
  font: 500 11px/1 var(--font-mono);
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--muted);
  color: var(--muted-foreground);
}
.ds-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ds-tabular { font-variant-numeric: tabular-nums; }