/* ==========================================================================
   VR1 Associates design tokens
   Brand Kit v1.0.0: warm paper + light saffron, warm ink, deep amber.
   One build, two themes. Paper is the brand's home ground and the default.
   Saffron is a graphic colour: it fills buttons and draws the mark, never
   small text. Deep amber carries links and figures on light. Contrast is
   verified in tools/qa.py against WCAG AA on both grounds.
   ========================================================================== */

/* ---- self-hosted faces (no third party font CDN) ----------------------- */
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"JBMono";src:url("../fonts/jbmono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"JBMono";src:url("../fonts/jbmono-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"JBMono","SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;

  --maxw:1220px;
  --maxw-read:74ch;
  --gutter:clamp(20px,5vw,64px);
  --radius-s:10px;
  --radius:16px;
  --radius-l:22px;

  --e:cubic-bezier(.16,1,.3,1);
  --e-out:cubic-bezier(.22,.61,.36,1);
  --t1:140ms; --t2:260ms; --t3:460ms; --t4:720ms;

  /* the brand palette, straight from the kit */
  --saffron:#F2C879;        /* light saffron, the primary brand fill */
  --saffron-2:#E9A83A;      /* saffron, dividers and the mark accent */
  --amber:#A06A0D;          /* deep amber, the text-safe saffron (AA on white) */
  --amber-2:#8A5C0B;
  --ink-c:#211C15;          /* warm near-black */
  --slate:#6E6558;          /* secondary text on light */
  --paper:#FDFAF3;
  --tint:#FBEFD6;           /* saffron wash */
  --hairline:#ECE4D4;

  /* the warm ink chrome. Identical in both themes so the header, footer and
     hero stay the firm's constant. The reversed mark lives here. */
  --ink:#211C15;
  --ink-2:#2B241A;
  --ink-3:#372F21;
  --on-ink:#FDFAF3;
  --on-ink-muted:#C9BEA6;   /* AA on ink (7.0:1) */
  --ink-line:rgba(253,250,243,.12);
  --ink-line-2:rgba(253,250,243,.2);

  --gold:#E9A83A;
  --gold-hi:#F2C879;        /* bright saffron for accents on ink */
  --gold-deep:#8A5C0B;

  /* one functional warning colour, used only for genuine alerts */
  --alert:#B4491E;
  --alert-hi:#E8A07A;

  /* the filled accent surface: saffron field, ink label. The signature button. */
  --btn:#F2C879;
  --btn-ink:#211C15;
  --btn-hover:#EFBE60;

  --z-head:100;
  --z-scrim:120;
  --z-nav:130;
  --z-consent:150;
  --z-buddy:160;
  --z-toast:170;
}

/* ---------- BRIGHT (default, the brand's own ground) --------------------- */
:root[data-theme="bright"]{
  --page:#FDFAF3;
  --panel:#FBEFD6;
  --card:#FFFFFF;
  --card-2:#FDFAF3;
  --text:#211C15;
  --muted:#5C5348;          /* darker slate, AA 6.7:1 on paper */
  --line:#ECE4D4;
  --line-strong:#DCD0B9;
  --accent:#8A5C0B;         /* deep amber, darkened for AA on the warm paper ground */
  --accent-ink:#FFFFFF;
  --accent-weak:rgba(160,106,13,.12);
  --accent-soft:rgba(160,106,13,.055);
  --graphic:#E9A83A;        /* saffron for decorative marks (diamonds, rules) */
  --ok:#3F6E45;
  --warn:#9A3F18;
  --shadow:0 22px 48px -30px rgba(33,28,21,.30);
  --shadow-lift:0 30px 64px -34px rgba(33,28,21,.40);
  --chip-bg:rgba(33,28,21,.045);
  color-scheme:light;
}

/* ---------- DARK (warm, ink-derived; not navy) --------------------------- */
:root[data-theme="dark"]{
  --page:#17130D;
  --panel:#1E1811;
  --card:#241E15;
  --card-2:#1B160F;
  --text:#F6F1E7;
  --muted:#B7AC97;
  --line:rgba(253,250,243,.10);
  --line-strong:rgba(253,250,243,.17);
  --accent:#F2C879;         /* saffron reads as text on the warm dark ground */
  --accent-ink:#211C15;
  --accent-weak:rgba(242,200,121,.14);
  --accent-soft:rgba(242,200,121,.06);
  --graphic:#F2C879;
  --ok:#8CC29A;
  --warn:#E8A07A;
  --shadow:0 20px 50px -28px rgba(0,0,0,.66);
  --shadow-lift:0 30px 70px -34px rgba(0,0,0,.8);
  --chip-bg:rgba(253,250,243,.05);
  color-scheme:dark;
}