/* ============================================================
   Clarity — design tokens
   Certifier brand language (2026-07-28 rebrand):
   white cards on a near-neutral canvas, thin borders, solid
   Certifier blue #1565D8 (never gradient), warm/cool surface
   bands, near-black ink headlines in Space Grotesk.
   ============================================================ */

/* Space Grotesk — vendored variable display face (300–700).
   Carries headlines, buttons, kickers, stat values, brand, tabs.
   Body/table text stays on the system stack (--font). */
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/SpaceGrotesk-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Surfaces ---- */
  --canvas: #F8F8F8;         /* Certifier neutral band (warmed from the old slate-tinted canvas) */
  --card: #FFFFFF;
  --card-subtle: #FAFAFA;
  --inset: #F2F2F3;          /* table header rows, wells */

  /* ---- Brand surface bands (Certifier) ---- */
  --surface-cool: #EAF2FF;   /* cool tint band (== --primary-50) */
  --surface-warm: #F5F3F2;   /* warm porcelain band */
  --surface-tan:  #E2D3C3;   /* warm tan band — see AA note below: no primary-600 text here */

  /* ---- Neutrals (de-slated zinc ramp — scrollbars, inverse surfaces) ---- */
  --neutral-300: #D4D4D8;
  --neutral-400: #A1A1AA;
  --surface-inverse: #262626;    /* near-black panel — undo bar / dark overlay surfaces */
  --panel-dark: #262626;         /* Certifier near-black panel band (alias of inverse) */

  /* ---- Borders (thin, neutral) ---- */
  --border: #E8E8EA;
  --border-strong: #DBDBDF;

  /* ---- Text ---- */
  --ink: #171717;            /* Certifier headline near-black */
  --text: #171717;           /* body follows the ink — neutral, no slate cast */
  --text-2: #52525B;
  --text-3: #6B6B74;
  --text-muted: #6B6B74;     /* 5.28:1 on white, 4.97:1 on canvas — AA-verified */
  --text-invert: #FFFFFF;

  /* ---- Primary (Certifier blue — solid #1565D8, never gradient) ---- */
  --primary-50:  #EAF2FF;
  --primary-100: #E3EEFF;
  --primary-200: #BFD8F8;
  --primary-300: #8FBAF0;
  --primary-400: #5490E4;
  --primary-500: #2E77DE;
  --primary-600: #1565D8;    /* 5.41:1 on white, 4.80:1 on primary-50 — AA-verified */
  --primary-700: #0F4FB0;    /* hover / active-tint text; 5.18:1 on --surface-tan */

  /* ---- Semantic: success (green) ---- */
  --success-50:  #F0FDF4;
  --success-100: #DCFCE7;
  --success-500: #22C55E;
  --success-600: #16A34A;
  --success-700: #15803D;

  /* ---- Semantic: warning (amber) ---- */
  --warning-50:  #FFFBEB;
  --warning-100: #FEF3C7;
  --warning-500: #F59E0B;
  --warning-600: #D97706;
  --warning-700: #B45309;

  /* ---- Semantic: danger (red) ---- */
  --danger-50:  #FEF2F2;
  --danger-100: #FEE2E2;
  --danger-500: #EF4444;
  --danger-600: #DC2626;
  --danger-700: #B91C1C;

  /* ---- Semantic: info (sky) ---- */
  --info-50:  #F0F9FF;
  --info-100: #E0F2FE;
  --info-500: #0EA5E9;
  --info-600: #0284C7;
  --info-700: #0369A1;

  /* ---- Accent: violet (7th entry-type family — Conference/CME) ---- */
  --violet-100: #EDE9FE;
  --violet-700: #6D28D9;

  /* ---- Radius scale ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-control: 10px;    /* buttons + form controls only */
  --radius-full: 999px;

  /* ---- Elevation (soft — flatter at rest, lift is earned; neutral ink, not slate) ---- */
  --shadow-1: 0 1px 2px rgba(23, 23, 23, 0.04);
  --shadow-2: 0 2px 8px rgba(23, 23, 23, 0.06), 0 1px 2px rgba(23, 23, 23, 0.04);
  --shadow-3: 0 8px 24px rgba(23, 23, 23, 0.10), 0 2px 6px rgba(23, 23, 23, 0.05);
  --shadow-4: 0 16px 48px rgba(23, 23, 23, 0.16), 0 4px 12px rgba(23, 23, 23, 0.08);
  --shadow-lift: 0 6px 16px rgba(23, 23, 23, 0.07), 0 2px 4px rgba(23, 23, 23, 0.05);

  /* ---- Spacing scale ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-2-5: 10px;   /* sanctioned half-step: icon-text gaps, dense inner paddings */
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;

  /* ---- Fluid type (clamp) ---- */
  --fs-2xs:  0.6875rem;                                 /* 11 — uppercase micro-labels, badges */
  --fs-xs:   0.75rem;                                   /* 12 — metadata, chips */
  --fs-sm:   0.8125rem;                                 /* 13 — secondary text */
  --fs-base: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);  /* 14–15 body */
  --fs-md:   clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);   /* 15–17 */
  --fs-lg:   clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);      /* 17–20 section titles */
  --fs-xl:   clamp(1.25rem, 1.15rem + 0.6vw, 1.5rem);       /* 20–24 page titles */
  --fs-2xl:  clamp(1.5rem, 1.3rem + 1vw, 1.875rem);         /* 24–30 stat values */
  --fs-3xl:  clamp(1.875rem, 1.6rem + 1.4vw, 2.375rem);     /* hero numbers */
  --fs-control: 0.875rem;   /* 14 static — nav, buttons, inputs, tabs, tables (controls do NOT track fluid body) */
  --fs-title:   1.375rem;   /* 22 static — page-header h1/h2 (POLISH-pinned) */

  /* ---- Font ---- */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --font-display: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- Layout ---- */
  --sidebar-w: 240px;
  --topbar-h: 64px;
  --bottom-tabs-h: 60px;
  --content-max: 1240px;
  --content-pad: clamp(16px, 3vw, 32px);  /* one page gutter — topbar, content, footer (overridden per breakpoint) */
  --card-pad: var(--sp-6);                /* card + stat-tile breathing (16px <900px) */
  --overlay-inset: 32px;                  /* total viewport inset (16px/side) for fixed overlays */

  /* ---- Control geometry ---- */
  --control-h: 40px;        /* standard control height — inputs, selects, search, primary/decision buttons */
  --control-h-sm: 32px;     /* compact control height — row-level buttons, dense filters */
  --icon-tile: 38px;        /* square icon tiles: avatar, stat-icon, search icon slot (NOT a control height) */
  --tap-target: 44px;       /* accessibility floor for touch targets */

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);   /* spring-ish decel for sheets */
  --dur-fast: 120ms;
  --dur-mid: 160ms;   /* hover lifts, chevron rotations */
  --dur: 200ms;
  --dur-slow: 320ms;

  /* ---- Focus ring ---- */
  --ring: 0 0 0 2px var(--card), 0 0 0 4px var(--primary-500);
  --ring-soft: 0 0 0 3px var(--primary-100);  /* sanctioned halo motif (current-state cards, moved markers) */
}

/* Responsive token overrides — keep every gutter on one axis per breakpoint */
@media (min-width: 900px) and (max-width: 1199px) {
  :root { --content-pad: var(--sp-5); }
}
@media (max-width: 899px) {
  :root {
    --content-pad: var(--sp-4);
    --card-pad: var(--sp-4);
  }
}