/* ── Self-hosted webfonts (variable woff2) ── */
@font-face{font-family:'Inter';src:url('../assets/fonts/inter.woff2?v=879372f5') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:'Sora';src:url('../assets/fonts/sora.woff2?v=51caea56') format('woff2');font-weight:100 800;font-style:normal;font-display:swap;}
/* ================================================================
   CertPulse Design System — CSS Design Tokens
   ================================================================
   Single source of truth for every CSS custom property in the app.
   Imported by:
     - packages/ui/src/base.css (full app — @import ./base-tokens.css)
     - branding_assets/**.html (standalone renders — pulls brand tokens
       without base.css's resets/utilities)
     - packages/email/scripts/generate-tokens.ts (parses the :root block
       to emit packages/email/src/branding.generated.ts)

   Rules for editing:
   - Never hardcode a color / radius / spacing in a consumer. Add or
     reference a token from this file instead.
   - Keep the :root block first; the dark-mode override + @media
     fallback must mirror each other key-for-key (a missing key in
     the fallback is a silent dark-mode regression for users without
     an explicit data-theme).
   - generate-tokens.ts parses `:root\s*\{...\n\}` with a regex — do
     not introduce nested braces or unterminated declarations inside
     the :root block.
   ================================================================ */

/* ── Light mode (default) ────────────────────────── */
:root {
  /* Surfaces */
  --bg: #f2f6fc;
  --surface: #ffffff;
  --surface-2: #e8eef8;
  --surface-3: #dde5f2;

  /* Text */
  --fg: #121821;
  --fg-2: #2a3f5c;
  --fg-3: #5a7494;
  --fg-4: #8fa8c0;

  /* Brand — blue */
  --brand: #2563eb;
  --brand-hi: #38bdf8;
  --brand-lo: #1d4ed8;
  --brand-dim: color-mix(in srgb, var(--brand) 8%, transparent);
  --brand-glow: color-mix(in srgb, var(--brand) 20%, transparent);

  /* Borders */
  --border: rgba(7, 20, 42, 0.1);
  --border-2: rgba(7, 20, 42, 0.06);

  /* Status — badge/chip text + background pairs */
  --green-bg: var(--color-emerald-50);
  --green-fg: var(--color-emerald-800);
  --amber-bg: var(--color-amber-50);
  --amber-fg: var(--color-amber-800);
  --red-bg: var(--color-red-50);
  --red-fg: var(--color-red-800);
  --blue-bg: #dbeafe;
  --blue-fg: var(--color-sky-800);
  --slate-bg: var(--color-slate-100);
  --slate-fg: var(--color-slate-600);
  --orange-bg: var(--color-orange-50);
  --orange-fg: var(--color-orange-700);

  /* Chart series — vibrant mid-tones for lines, dots, and legends */
  --chart-blue: var(--color-blue-500);
  --chart-purple: var(--color-violet-600);
  --chart-green: var(--color-emerald-600);
  --chart-red: var(--color-red-500);

  /* Shadows */
  --shadow-s: 0 1px 2px rgba(7, 20, 42, 0.06), 0 1px 4px rgba(7, 20, 42, 0.04);
  --shadow-m: 0 4px 16px rgba(7, 20, 42, 0.09), 0 2px 6px rgba(7, 20, 42, 0.04);
  --shadow-l: 0 8px 32px rgba(7, 20, 42, 0.12), 0 4px 12px rgba(7, 20, 42, 0.05);

  /* Scrollbar */
  --scroll-thumb: rgba(7, 20, 42, 0.18);

  /* Theme-invariant — white text/icons on colored backgrounds */
  --on-brand: #ffffff;

  /* Overlay backdrops */
  --overlay: rgba(0, 0, 0, 0.45);
  --overlay-heavy: rgba(0, 0, 0, 0.7);
  --overlay-light: rgba(0, 0, 0, 0.3);

  /* ── Color palette — raw reference values for status/chart tokens ── */
  --color-emerald-50: #ecfdf5;
  --color-emerald-300: #6ee7b7;
  --color-emerald-400: #34d399;
  --color-emerald-500: #10b981;
  --color-emerald-600: #059669;
  --color-emerald-800: #065f46;
  --color-sky-50: #f0f9ff;
  --color-sky-300: #7dd3fc;
  --color-sky-400: #38bdf8;
  --color-sky-500: #0ea5e9;
  --color-sky-600: #0284c7;
  --color-sky-800: #075985;
  --color-red-50: #fef2f2;
  --color-red-300: #fca5a5;
  --color-red-400: #f87171;
  --color-red-500: #ef4444;
  --color-red-800: #991b1b;
  --color-amber-50: #fffbeb;
  --color-amber-300: #fcd34d;
  --color-amber-400: #fbbf24;
  --color-amber-500: #f59e0b;
  --color-amber-700: #b45309;
  --color-amber-800: #92400e;
  --color-violet-400: #a78bfa;
  --color-violet-500: #8b5cf6;
  --color-violet-600: #7c3aed;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-slate-100: #f1f5f9;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-orange-50: #fff7ed;
  --color-orange-400: #fb923c;
  --color-orange-500: #f97316;
  --color-orange-700: #c2410c;
  --color-linkedin: #0a66c2;
  --color-linkedin-hover: #004182;

  /* ── Typography — 6-step scale ─────────────────── */
  --text-xs: 0.75rem; /* 12px — smallest allowed (captions, helper text) */
  --text-s: 0.875rem; /* 14px — dense labels, table cells, form inputs */
  --text-m: 1rem; /* 16px — body default (WCAG AA minimum) */
  --text-l: 1.25rem; /* 20px — subheadings (h4) */
  --text-xl: 1.5rem; /* 24px — section headings (h2-h3) */
  --text-2xl: 2rem; /* 32px — page titles (h1) */
  --text-3xl: 2.5rem; /* 40px — hero headings */
  --text-4xl: 3rem; /* 48px — hero display */
  --text-display-xl: clamp(
    3.5rem,
    6vw,
    5.5rem
  ); /* 56–88px — editorial display numerals (dashboard2 hero, KPI count-ups) */

  /* ── Font families ──────────────────────────────── */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Sora', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'Fira Code', Menlo, monospace;

  /* ── Font weight ────────────────────────────────── */
  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ── Border radius ──────────────────────────────── */
  --radius-xs: 2px;
  --radius-s: 4px;
  --radius-m: 6px;
  --radius-l: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  /* ── Spacing ────────────────────────────────────── */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-s: 12px;
  --space-m: 16px;
  --space-l: 20px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 40px;
  --space-4xl: 56px;
  --space-5xl: 64px;

  /* ── Letter spacing — 7-step scale ─────────────── */
  --tracking-2xs: -0.02em;
  --tracking-xs: -0.015em;
  --tracking-s: 0;
  --tracking-m: 0.025em;
  --tracking-l: 0.05em;
  --tracking-xl: 0.08em;
  --tracking-2xl: 0.15em;

  /* ── Line height ──────────────────────────────── */
  --lh-none: 1;
  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-normal: 1.5;
  --lh-relaxed: 1.625;

  /* ── Transition durations ───────────────────────── */
  --dur-100: 100ms;
  --dur-150: 150ms;
  --dur-300: 300ms;

  /* ── Z-index scale ──────────────────────────────── */
  --z-base: 1;
  --z-raised: 10;
  --z-header: 100;
  --z-modal: 1000;
  --z-popover: 1050;
  --z-toast: 1100;
}

/* ── Dark mode ───────────────────────────────────── */
[data-theme='dark'] {
  --bg: #060d1a;
  --surface: #121821;
  --surface-2: #142033;
  --surface-3: #1c2e48;

  --fg: #f8fafc;
  --fg-2: #a0bdd4;
  --fg-3: #5a7a92;
  --fg-4: #334d62;

  --brand: #60a5fa;
  --brand-hi: #38bdf8;
  --brand-lo: #3b82f6;
  --brand-dim: color-mix(in srgb, var(--brand) 10%, transparent);
  --brand-glow: color-mix(in srgb, var(--brand) 18%, transparent);

  --border: rgba(160, 189, 212, 0.11);
  --border-2: rgba(160, 189, 212, 0.06);

  --green-bg: color-mix(in oklch, var(--color-emerald-500) 12%, transparent);
  --green-fg: var(--color-emerald-300);
  --amber-bg: color-mix(in oklch, var(--color-amber-500) 12%, transparent);
  --amber-fg: var(--color-amber-300);
  --red-bg: color-mix(in oklch, var(--color-red-500) 12%, transparent);
  --red-fg: var(--color-red-300);
  --blue-bg: color-mix(in oklch, var(--color-sky-500) 12%, transparent);
  --blue-fg: var(--color-sky-300);
  --slate-bg: color-mix(in oklch, var(--color-slate-400) 10%, transparent);
  --slate-fg: var(--color-slate-400);
  --orange-bg: color-mix(in oklch, var(--color-orange-500) 12%, transparent);
  --orange-fg: var(--color-orange-400);

  --chart-blue: var(--color-blue-400);
  --chart-purple: var(--color-violet-400);
  --chart-green: var(--color-emerald-400);
  --chart-red: var(--color-red-400);

  --shadow-s: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);
  --shadow-m: 0 4px 16px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-l: 0 8px 32px rgba(0, 0, 0, 0.7), 0 4px 12px rgba(0, 0, 0, 0.4);

  --scroll-thumb: rgba(160, 189, 212, 0.18);
}

/* ── Explicit light override ─────────────────────── */
/* Mirrors the :root light tokens key-for-key so that `data-theme="light"`
   on any descendant (e.g. the unauthenticated `<main className="login">`)
   re-asserts light tokens regardless of `<html data-theme="dark">`. Must
   mirror the [data-theme='dark'] block above key-for-key. */
[data-theme='light'] {
  --bg: #f2f6fc;
  --surface: #ffffff;
  --surface-2: #e8eef8;
  --surface-3: #dde5f2;

  --fg: #121821;
  --fg-2: #2a3f5c;
  --fg-3: #5a7494;
  --fg-4: #8fa8c0;

  --brand: #2563eb;
  --brand-hi: #38bdf8;
  --brand-lo: #1d4ed8;
  --brand-dim: color-mix(in srgb, var(--brand) 8%, transparent);
  --brand-glow: color-mix(in srgb, var(--brand) 20%, transparent);

  --border: rgba(7, 20, 42, 0.1);
  --border-2: rgba(7, 20, 42, 0.06);

  --green-bg: var(--color-emerald-50);
  --green-fg: var(--color-emerald-800);
  --amber-bg: var(--color-amber-50);
  --amber-fg: var(--color-amber-800);
  --red-bg: var(--color-red-50);
  --red-fg: var(--color-red-800);
  --blue-bg: #dbeafe;
  --blue-fg: var(--color-sky-800);
  --slate-bg: var(--color-slate-100);
  --slate-fg: var(--color-slate-600);
  --orange-bg: var(--color-orange-50);
  --orange-fg: var(--color-orange-700);

  --chart-blue: var(--color-blue-500);
  --chart-purple: var(--color-violet-600);
  --chart-green: var(--color-emerald-600);
  --chart-red: var(--color-red-500);

  --shadow-s: 0 1px 2px rgba(7, 20, 42, 0.06), 0 1px 4px rgba(7, 20, 42, 0.04);
  --shadow-m: 0 4px 16px rgba(7, 20, 42, 0.09), 0 2px 6px rgba(7, 20, 42, 0.04);
  --shadow-l: 0 8px 32px rgba(7, 20, 42, 0.12), 0 4px 12px rgba(7, 20, 42, 0.05);

  --scroll-thumb: rgba(7, 20, 42, 0.18);
}

/* ── System-preference fallback (before JS sets data-theme) ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #060d1a;
    --surface: #121821;
    --surface-2: #142033;
    --surface-3: #1c2e48;
    --fg: #f8fafc;
    --fg-2: #a0bdd4;
    --fg-3: #5a7a92;
    --fg-4: #334d62;
    --brand: #60a5fa;
    --brand-hi: #38bdf8;
    --brand-lo: #3b82f6;
    --brand-dim: color-mix(in srgb, var(--brand) 10%, transparent);
    --brand-glow: color-mix(in srgb, var(--brand) 18%, transparent);
    --border: rgba(160, 189, 212, 0.11);
    --border-2: rgba(160, 189, 212, 0.06);
    --green-bg: color-mix(in oklch, var(--color-emerald-500) 12%, transparent);
    --green-fg: var(--color-emerald-300);
    --amber-bg: color-mix(in oklch, var(--color-amber-500) 12%, transparent);
    --amber-fg: var(--color-amber-300);
    --red-bg: color-mix(in oklch, var(--color-red-500) 12%, transparent);
    --red-fg: var(--color-red-300);
    --blue-bg: color-mix(in oklch, var(--color-sky-500) 12%, transparent);
    --blue-fg: var(--color-sky-300);
    --slate-bg: color-mix(in oklch, var(--color-slate-400) 10%, transparent);
    --slate-fg: var(--color-slate-400);
    --orange-bg: color-mix(in oklch, var(--color-orange-500) 12%, transparent);
    --orange-fg: var(--color-orange-400);
    --chart-blue: var(--color-blue-400);
    --chart-purple: var(--color-violet-400);
    --chart-green: var(--color-emerald-400);
    --chart-red: var(--color-red-400);
    --shadow-s: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);
    --shadow-m: 0 4px 16px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.3);
    --shadow-l: 0 8px 32px rgba(0, 0, 0, 0.7), 0 4px 12px rgba(0, 0, 0, 0.4);
    --scroll-thumb: rgba(160, 189, 212, 0.18);
  }
}