/* ============================================================
   PRINCETON COATING — DESIGN TOKENS
   ------------------------------------------------------------
   This is the ONLY file you need to edit to re-skin the site.
   Every colour in main.css resolves back to something here.

   PALETTE: brand orange, black and white — sampled directly
   from the supplied logo artwork.

     #F6931E  Princeton orange   (the wordmark and crown body)
     #FAAF40  crown highlight    (the lit half of the crown)
     #C4700F  deep orange        (derived, for gradient shadow)
     #FFFFFF  wordmark white     ("ton" and the tagline)
     #000000  logo field black

   Surfaces are neutral greys — no blue or warm cast — so the
   logo sits on the page exactly as it does on its own artwork.
   ============================================================ */

:root {
  /* ---------- Brand ---------- */
  --brand:      #F6931E;   /* Princeton orange — sampled from logo */
  --brand-hi:   #FAAF40;   /* crown highlight                      */
  --brand-lo:   #C4700F;   /* deep edge for gradients              */
  --brand-ink:  #0A0A0A;   /* text ON orange — black, per the logo */
  --brand-soft: rgba(246, 147, 30, 0.13);
  --brand-line: rgba(246, 147, 30, 0.36);

  /* ---------- Surfaces — neutral black ---------- */
  --ink:      #050505;   /* page — effectively the logo's field   */
  --ink-2:    #0D0D0D;   /* alternating band                      */
  --ink-3:    #151515;   /* cards                                 */
  --ink-4:    #1F1F1F;   /* raised / skeleton                     */
  --paper:    #F5F5F5;   /* light section, if ever needed         */
  --paper-2:  #E8E8E8;

  /* ---------- Type — neutral white ---------- */
  --text:     #F4F4F4;
  --text-dim: #A6A6A6;
  --text-mute:#707070;
  --text-on-paper:     #0A0A0A;
  --text-on-paper-dim: #4A4A4A;

  /* ---------- Lines ---------- */
  --line:      rgba(255,255,255,0.10);
  --line-soft: rgba(255,255,255,0.06);
  --line-dark: rgba(5,5,5,0.14);

  /* ---------- Specular sheen (light raking across a coated panel) ---------- */
  --sheen: linear-gradient(158deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.012) 34%, transparent 62%);

  /* ---------- Radii ---------- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 22px;

  /* ---------- Elevation ---------- */
  --shadow-1: 0 1px 2px rgba(0,0,0,.5);
  --shadow-2: 0 12px 32px -12px rgba(0,0,0,.8);
  --shadow-3: 0 40px 80px -32px rgba(0,0,0,.9);
  --glow:     0 0 0 1px var(--brand-line), 0 18px 48px -20px rgba(246,147,30,.45);

  /* ---------- Rhythm ---------- */
  --gutter:  clamp(1.15rem, 4vw, 2.5rem);
  --section: clamp(4.5rem, 9vw, 8.5rem);
  --maxw:    1240px;
  --maxw-narrow: 780px;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --dur: .5s;
}

/* ---------- Typography roles ----------
   Display : Archivo   — engineered, expandable grotesque. Spec-sheet energy,
                         and a deliberate contrast against the serif wordmark
                         so headlines never compete with the logo.
   Body    : IBM Plex Sans — technical, highly legible on black.
   Data    : IBM Plex Mono — measurements, coating specs, step numbers.
--------------------------------------- */
:root {
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-data:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}