/* ============================================================================
   Ubisky design tokens — the single source of truth.
   Concept B "Executive Light". Nothing below hardcodes a value that a component
   uses directly; components reference these variables only, so re-theming (or a
   dark mode) is a token change, not a find-and-replace.
   ========================================================================= */

/* ---- self-hosted variable fonts (no third-party request, no CDN latency) -- */
@font-face{
  font-family:"Lexend";
  src:url("../fonts/Lexend.woff2") format("woff2-variations");
  font-weight:300 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Source Sans 3";
  src:url("../fonts/Source-Sans-3.woff2") format("woff2-variations");
  font-weight:300 700; font-style:normal; font-display:swap;
}

:root{
  /* ---------------------------------------------------------------- colour */
  --ink:#0B1220;            /* headings, dark bands            */
  --ink-2:#131C2E;
  --ink-3:#1E2A3E;
  --body:#3C4A5C;           /* body copy                       */
  --muted:#64748B;          /* secondary text                  */
  --faint:#94A3B8;          /* captions, meta                  */

  --accent:#2563EB;         /* the one accent — used sparingly */
  --accent-2:#3B82F6;
  --accent-strong:#1D4ED8;
  --accent-soft:#EFF6FF;
  --accent-line:#DBEAFE;
  --cyan:#22D3EE;

  --surface:#F7F9FC;        /* page background                 */
  --surface-2:#FFFFFF;
  --surface-3:#F1F5F9;
  --border:#E3E9F0;
  --border-2:#D2DBE6;
  --on-dark:#FFFFFF;
  --on-dark-soft:#9FB0C6;
  --on-dark-line:rgba(255,255,255,.10);

  --ok:#15803D;  --ok-soft:#F0FDF4;
  --warn:#B45309;--warn-soft:#FFFBEB;
  --bad:#B91C1C; --bad-soft:#FEF2F2;

  /* ------------------------------------------------------------ typography */
  --font-h:"Lexend",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-b:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* fluid type: clamp(min, preferred, max) so nothing needs a media query */
  --t-display:clamp(2.5rem,1.6rem + 3.4vw,3.6rem);   /* 40 → 58 */
  --t-h1:clamp(2rem,1.4rem + 2.2vw,2.75rem);          /* 32 → 44 */
  --t-h2:clamp(1.6rem,1.25rem + 1.4vw,2.1rem);        /* 26 → 34 */
  --t-h3:clamp(1.15rem,1.05rem + .4vw,1.35rem);       /* 18 → 22 */
  --t-lg:1.125rem;   /* 18 */
  --t-body:1.0625rem;/* 17 */
  --t-sm:.9375rem;   /* 15 */
  --t-xs:.8125rem;   /* 13 */
  --t-micro:.75rem;  /* 12 */

  --lh-tight:1.08;
  --lh-head:1.2;
  --lh-body:1.62;
  --track-tight:-.03em;
  --track-head:-.02em;
  --track-wide:.12em;

  /* ----------------------------------------------------------------- space */
  --s-1:.25rem; --s-2:.5rem;  --s-3:.75rem; --s-4:1rem;
  --s-5:1.5rem; --s-6:2rem;   --s-7:2.5rem; --s-8:3rem;
  --s-9:4rem;   --s-10:5rem;  --s-11:6.5rem;

  /* ---------------------------------------------------------------- shape */
  --r-sm:8px; --r:10px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;

  /* ------------------------------------------------------------- elevation */
  --sh-1:0 1px 2px rgba(11,18,32,.06);
  --sh-2:0 8px 26px -10px rgba(11,18,32,.16),0 1px 2px rgba(11,18,32,.05);
  --sh-3:0 30px 60px -20px rgba(11,18,32,.28);
  --sh-dark:0 40px 80px -30px rgba(0,0,0,.8);

  /* ---------------------------------------------------------------- motion */
  /* Every transition in the site uses these. Nothing invents its own timing. */
  --dur-fast:120ms;
  --dur:180ms;
  --dur-slow:320ms;
  --dur-hero:500ms;
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);   /* expo-ish, for entrances */
  --ease-in:cubic-bezier(.7,0,.84,0);    /* exits leave faster than they enter */

  /* --------------------------------------------------------------- layout */
  --wrap:1200px;
  --wrap-narrow:760px;
  --nav-h:72px;
  --nav-h-sm:58px;

  --z-nav:100; --z-drawer:200; --z-toast:300;
}

/* Dark band scope: components inside .on-dark flip their text/border tokens so
   the same markup works on the navy hero and the light body. */
.on-dark{
  --body:#C7D3E2;
  --muted:#93A3B8;
  --faint:#7D8DA5;
  --border:rgba(255,255,255,.10);
  --border-2:rgba(255,255,255,.18);
  --surface:#0D1424;
  --surface-2:rgba(255,255,255,.05);
  --surface-3:rgba(255,255,255,.08);
  --ink:#FFFFFF;
  --accent-soft:rgba(59,130,246,.16);
  --accent-line:rgba(59,130,246,.32);
  color:var(--body);
}