/* ─────────────────────────────────────────────────────────────
   PNC BREAD · DESIGN TOKENS
   Single source of truth. Inline-imported by index.html.
   Categories: color · spacing · radius · tracking · type · motion · shadow
   ───────────────────────────────────────────────────────────── */

:root {
  /* ── COLOR (8 named brand values) ──────────────────────── */
  --c-deep:        #060a15;   /* page bg */
  --c-navy:        #0d1530;   /* deep section accent */
  --c-brown-deep:  #1d100a;   /* "How to Bake" + footer top */
  --c-brown-noble: #160c07;   /* footer bottom */
  --c-gold:        #c9a84c;   /* logo, headings on dark */
  --c-amber:       #C8762A;   /* primary action / cursor */
  --c-amber-hi:    #E09A52;   /* hover */
  --c-parchment:   #FAFAF5;   /* light section bg */
  --c-ink:         #1A120A;   /* body text on light */

  /* derived (kept for compatibility, not new colours) */
  --c-cream:       #F3E7CC;
  --c-cream-muted: #8A7B63;
  --c-ink-soft:    #6B5A3E;
  --c-ink-muted:   #9A8B73;
  --c-gold-muted:  #8a7040;
  --c-gold-soft:   #dfc06a;

  /* ── SPACING (4-base scale) ────────────────────────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 40px;
  --s-7: 64px;
  --s-8: 96px;
  --s-9: 128px;

  /* ── RADIUS ────────────────────────────────────────────── */
  --r-0: 0;
  --r-1: 4px;
  --r-2: 10px;

  /* ── TRACKING (3 sanctioned values) ────────────────────── */
  --tracking-loose: 0.28em;   /* eyebrows */
  --tracking-mid:   0.18em;   /* small caps, status text */
  --tracking-tight: 0.06em;   /* numeric data */

  /* ── TYPE SCALE (modular ratio 1.25 — 12pt base) ───────── */
  --t-xs:   12px;
  --t-sm:   15px;
  --t-md:   18.75px;
  --t-lg:   23.4px;
  --t-xl:   29.3px;
  --t-2xl:  36.6px;
  --t-3xl:  45.8px;
  --t-4xl:  57.2px;

  /* ── MOTION (only 3 sanctioned animations) ─────────────── */
  --motion-fast:    0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --motion-mid:     0.3s  cubic-bezier(0.4, 0, 0.2, 1);
  --motion-slow:    0.8s  cubic-bezier(0.16, 1, 0.3, 1);

  /* ── SHADOW ────────────────────────────────────────────── */
  --shadow-sm: 0 4px 16px rgba(0,0,0,0.18);
  --shadow-md: 0 12px 32px rgba(0,0,0,0.32);
  --shadow-lg: 0 28px 64px rgba(0,0,0,0.55);
  --shadow-amber: 0 8px 24px rgba(200,118,42,0.28);

  /* ── BORDERS ───────────────────────────────────────────── */
  --border-gold:  rgba(201,168,76,0.18);
  --border-amber: rgba(200,118,42,0.18);

  /* ── GRID ──────────────────────────────────────────────── */
  --grid-max: 1180px;
  --grid-gutter: clamp(20px, 4vw, 40px);
}

/* ── GLOBAL: NO ITALICS ANYWHERE ──
   Browser defaults render <em>, <cite>, <i>, <address>, <var>, <dfn>, <q>
   in italic. PNC Bread uses no italic type — only Helvetica Neue + Courier,
   both upright. This rule overrides every default. */
em, cite, i, address, var, dfn, q, blockquote {
  font-style: normal !important;
}

/* ─────────────────────────────────────────────────────────────
   GLOBAL: NO NATIVE CURSOR — bulletproof, every state, every element.
   Only the orange square + lagging square (rendered as JS-positioned
   fixed divs) ever appears. This rule has highest reach short of
   inline-style and is the first defence layer (JS is the second).
   ───────────────────────────────────────────────────────────── */
html, body,
html *, body *,
html *::before, body *::before,
html *::after,  body *::after,
*, *::before, *::after,
*:hover, *:focus, *:active, *:focus-visible, *:focus-within,
*:visited, *:link, *:target, *:checked, *:indeterminate,
*:disabled, *:enabled, *:required, *:optional,
*:valid, *:invalid, *:in-range, *:out-of-range,
*:read-only, *:read-write, *:placeholder-shown,
*::placeholder, *::selection, *::marker, *::file-selector-button,
*::-webkit-input-placeholder, *::-moz-placeholder,
*::-webkit-scrollbar, *::-webkit-scrollbar-thumb, *::-webkit-scrollbar-track,
input, textarea, select, option, button, a, label,
input:hover, input:focus, input:active,
textarea:hover, textarea:focus, textarea:active,
select:hover, select:focus, select:active,
button:hover, button:focus, button:active,
a:hover, a:focus, a:active,
[role="button"], [contenteditable], [tabindex],
[draggable] {
  cursor: none !important;
}

/* Touch devices — bring native cursors back so pointer-tap targets are usable */
@media(hover:none){
  html, body, *, *::before, *::after, *:hover, *:focus { cursor: auto !important; }
  a, button, [role="button"], [tabindex] { cursor: pointer !important; }
  input, textarea, [contenteditable] { cursor: text !important; }
}