/* ==========================================================================
   FOMS — Design Tokens
   Fomi Olu Demi Services · Certificate Verification Portal

   Source of truth for color, type, spacing, radii and shadow. Every other
   stylesheet should reach for a var(--token) here rather than a raw value.

   BREAKPOINTS (referenced in comments throughout — CSS vars can't be used
   inside @media queries, so these are documented here for consistency):
     --bp-xs   0px     phones, portrait
     --bp-sm   480px   large phones
     --bp-md   768px   tablets
     --bp-lg   1024px  small laptops / admin shell switches to fixed sidebar
     --bp-xl   1280px  desktop, container max-width
   ========================================================================== */

:root{
  /* ---- color: surfaces & ink ---- */
  --ink:#16232A;
  --ink-soft:#3E4E58;
  --paper:#EFF1EA;
  --paper-alt:#F8F9F5;
  --surface:#FFFFFF;

  /* ---- color: status / brand accents ---- */
  --seal-red:#A23B2E;
  --seal-red-soft:rgba(162,59,46,.10);
  --verified:#2F6B4F;
  --verified-soft:rgba(47,107,79,.10);
  --amber:#96701F;
  --amber-soft:rgba(184,130,46,.14);
  --accent:#1E4A6B;
  --accent-soft:rgba(30,74,107,.12);
  --slate:#5B6B72;

  /* ---- color: borders ---- */
  --border:#DBDFD8;
  --border-soft:#E7E9E2;

  /* ---- elevation ---- */
  --shadow-sm:0 1px 2px rgba(22,35,42,.06);
  --shadow-md:0 8px 28px rgba(22,35,42,.10);
  --shadow-lg:0 16px 44px rgba(22,35,42,.16);

  /* ---- radius ---- */
  --r-sm:6px;
  --r-md:10px;
  --r-lg:16px;
  --r-pill:999px;

  /* ---- type families ---- */
  --font-logo:'UnifrakturMaguntia',cursive;
  --font-display:'Fraunces',serif;
  --font-body:'IBM Plex Sans',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;

  /* ---- fluid type scale (clamp: min, preferred-vw, max) ---- */
  --fs-xs:  clamp(0.6875rem, 0.66rem + 0.15vw, 0.75rem);
  --fs-sm:  clamp(0.8125rem, 0.79rem + 0.15vw, 0.875rem);
  --fs-base:clamp(0.9375rem, 0.92rem + 0.15vw, 1rem);
  --fs-md:  clamp(1.0625rem, 1.02rem + 0.25vw, 1.1875rem);
  --fs-lg:  clamp(1.25rem, 1.15rem + 0.5vw, 1.4375rem);
  --fs-xl:  clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
  --fs-2xl: clamp(1.875rem, 1.5rem + 1.8vw, 2.375rem);
  --fs-3xl: clamp(2.25rem, 1.7rem + 2.8vw, 3rem);

  /* ---- spacing scale (4px base) ---- */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:20px;
  --sp-6:24px;
  --sp-7:32px;
  --sp-8:48px;
  --sp-9:64px;
  --sp-10:80px;

  /* ---- layout ---- */
  --container-max:1180px;
  --sidebar-w:230px;
  --topnav-h:40px;

  /* ---- motion ---- */
  --ease-out:cubic-bezier(.2,.9,.3,1.1);
  --dur-fast:.15s;
  --dur-med:.38s;
}