/* ============================================================
   TRU DESIGNS — Design Tokens
   Palette: Black / White / Accent Blue #10347E (+ neutral greys)
   Type: Glacial Indifference, light only.
   ============================================================ */

@font-face{
  font-family:"Glacial Indifference";
  src:url("/fonts/GlacialIndifference-Regular.woff") format("woff");
  font-weight:400; font-style:normal; font-display:swap;
}
/* Display grotesque for big headings — Switzer (sharp neo-grotesque, matches ref-Text-Home-Hero) */
@font-face{ font-family:"Switzer"; src:url("/fonts/Switzer-Light.woff2") format("woff2"); font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:"Switzer"; src:url("/fonts/Switzer-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Switzer"; src:url("/fonts/Switzer-Medium.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }

:root{
  /* ---- Core palette ---- */
  --paper:      #ffffff;
  --black:      #000000;
  --ink:        #0b0b0c;   /* near-black text on light + dark-section bg */
  --ink-2:      #141419;   /* elevated dark surface */
  --ink-3:      #1c1c22;
  --accent:     #10347e;   /* THE accent blue */
  --accent-2:   #1c4aa8;   /* lighter accent for hairlines on dark */
  --accent-ink: #0a2860;   /* accent pressed */

  /* ---- Neutrals (rules + muted labels only) ---- */
  --grey-90: #1c1c22;
  --grey-70: #4a4a52;
  --grey-60: #6b6b73;
  --grey-40: #9a9aa2;
  --grey-25: #c9c9cf;
  --grey-12: #ededf0;
  --hair-dark:  rgba(255,255,255,.14);
  --hair-light: rgba(11,11,12,.13);

  /* ---- Semantic (DARK — whole site is dark mode) ---- */
  --bg:    var(--ink);
  --fg:    #f4f4f6;
  --muted: var(--grey-40);
  --rule:  var(--hair-dark);

  /* ---- Type ---- */
  --font-sans:"Glacial Indifference","Questrial","Century Gothic",
              ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display:"Switzer","Glacial Indifference",ui-sans-serif,system-ui,sans-serif;

  --t-display: clamp(2.75rem, 6.2vw, 7.5rem);
  --t-h1:      clamp(2.25rem, 4.4vw, 4.5rem);
  --t-h2:      clamp(1.6rem, 2.6vw, 2.75rem);
  --t-h3:      clamp(1.2rem, 1.55vw, 1.6rem);
  --t-lead:    clamp(1.2rem, 1.9vw, 1.9rem);
  --t-body:    clamp(1rem, 1.02vw, 1.1rem);
  --t-small:   0.875rem;
  --t-label:   0.72rem;
  --t-stat:    clamp(3rem, 7vw, 8rem);

  /* ---- Spacing ---- */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem;
  --s-6:2rem;  --s-7:3rem;  --s-8:4rem;  --s-9:6rem;  --s-10:8rem;
  --s-11:10rem; --s-12:14rem;

  --page-x:   clamp(1.25rem, 5vw, 6rem);
  --section-y:clamp(5rem, 12vh, 12rem);
  --maxw: 1680px;

  /* ---- Motion ---- */
  --ease-tru: cubic-bezier(.16,1,.3,1);
  --ease-inout: cubic-bezier(.65,.05,.36,1);
  --dur-micro: .28s;
  --dur-base:  .8s;

  /* ---- Header ---- */
  --header-h: clamp(64px, 8vh, 88px);
  --z-header: 100;
  --z-overlay: 200;
}

/* Dark section: flip semantics */
.section--dark{
  --bg: var(--ink);
  --fg: #f4f4f6;
  --muted: var(--grey-40);
  --rule: var(--hair-dark);
  background: var(--bg);
  color: var(--fg);
}
.section--black{
  --bg: var(--black);
  --fg: #f4f4f6;
  --muted: var(--grey-40);
  --rule: var(--hair-dark);
  background: var(--bg);
  color: var(--fg);
}