/* brand.css — the single place brand presentation lives. Every other stylesheet
   consumes these custom properties; swapping the brand touches only this file,
   img/logo.svg and the seal colours in js/login-seal.js (spec §1.6).

   Direction: "postal seal" — ink, paper and one gold. Gold #f1cb43 is light (~1.6:1 on
   white), so it is split into three tokens with three different jobs:
     --imp-primary        the fill itself — the stamp, the seal, the one primary button,
                           the active-nav rule. Anywhere gold is a filled AREA.
     --imp-primary-ink    dark ink for text/icons drawn ON a gold fill (never white).
     --imp-primary-strong darker gold for when gold is the text/border colour on white
                           (>= 4.5:1 on white): the focus ring on light surfaces. */

/* Archivo (SIL OFL 1.1, fonts/OFL.txt), one variable file: weight 100–900 and width
   62–125%. Latin subset; anything outside it falls back to the system face. */
@font-face {
  font-family: 'Bricolage';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('../fonts/bricolage-latin-variable.woff2') format('woff2-variations'),
       url('../fonts/bricolage-latin-variable.woff2') format('woff2');
}
/* Manrope (SIL OFL 1.1, fonts/manrope-OFL.txt), the body face: one variable latin file, weight 200–800. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('../fonts/manrope-latin-variable.woff2') format('woff2-variations'),
       url('../fonts/manrope-latin-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url('../fonts/archivo-latin-variable.woff2') format('woff2-variations'),
       url('../fonts/archivo-latin-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* brand — sidebar-and-cards layout in Imperium gold (owner 2026-09-24). Swap these few lines to rebrand. */
  --imp-primary:        #D4A418;   /* gold — fills (gradient start) */
  --imp-primary-2:      #F1CB43;   /* light gold — the second gradient stop */
  --imp-primary-ink:    #1f1a0a;   /* dark ink for text/icons ON a gold fill */
  --imp-primary-strong: #806500;   /* dark gold as text/border on white (>= 4.5:1) */
  --imp-accent:         var(--imp-primary-strong);
  --imp-primary-hover:  #C39312;
  --imp-primary-active: #A87E0C;
  --imp-primary-2-hover: #E3BB2C;
  --imp-primary-wash:   rgba(212,164,24,0.08);   /* hover wash on white */
  --imp-primary-wash-2: rgba(212,164,24,0.16);
  --imp-primary-glow:   rgba(212,164,24,0.30);   /* primary button shadow */
  --imp-amber:  #B7791F;   /* burnt ochre: the warning rule */

  /* ink and paper */
  --imp-ink:      #16110A;   /* espresso ink */
  --imp-bg:       #F5F4F1;   /* warm paper */
  --imp-surface:  #ffffff;
  --imp-text:     var(--imp-ink);
  --imp-secondary: #4A4033;
  --imp-muted:    #6A5E4C;
  --imp-rule:     #E6E3DA;
  --imp-rule-strong: #CFCABB;

  /* the rail: an espresso-leather panel */
  --imp-side-bg:    linear-gradient(175deg, #1c1810 0%, #17140E 55%, #120f0a 100%);   /* espresso leather */
  --imp-side-text:  rgba(255,255,255,0.94);
  --imp-side-muted: rgba(255,255,255,0.70);
  --imp-side-rule:  rgba(255,255,255,0.14);
  --imp-side-strong: #ffffff;
  --imp-side-hover:  rgba(255,255,255,0.08);
  --imp-side-active: rgba(255,255,255,0.16);
  --imp-side-chip:   rgba(255,255,255,0.14);
  --imp-side-chip-border: rgba(255,255,255,0.20);
  --imp-side-hint:   rgba(255,255,255,0.22);
  --imp-side-hint-clear: rgba(255,255,255,0);
  --imp-ink-clear:   rgba(22,17,10,0);
  --imp-ink-frame:   rgba(22,17,10,0.30);

  /* shadows */
  --imp-shadow-xs: 0 1px 2px rgba(22,17,10,0.05);
  --imp-shadow:    0 2px 10px rgba(60,45,10,0.06), 0 1px 2px rgba(60,45,10,0.05);
  --imp-shadow-md: 0 10px 28px rgba(60,45,10,0.10), 0 2px 6px rgba(60,45,10,0.06);
  --imp-shadow-side: 0 20px 50px rgba(30,22,5,0.28);
  --imp-shadow-inner: 0 2px 8px rgba(0,0,0,0.15);

  /* WhatsApp green (its own brand colour; white text at >= 4.5:1 on the darker shade) */
  --imp-wa: #128C7E;
  --imp-wa-hover: #075E54;
  --imp-wa-ink: #ffffff;

  /* money + state: text only, AA on white */
  --imp-red:   #B42318;
  --imp-green: #047857;
  --imp-red-wash:   rgba(239,68,68,0.08);
  --imp-green-wash: rgba(16,185,129,0.10);
  --imp-amber-wash: rgba(183,121,31,0.10);

  /* type */
  --imp-display: 'Bricolage', 'Manrope', system-ui, sans-serif;   /* titles and big numbers */
  --imp-gold-edge:  #8a6d00;   /* the bar's shaded lower edge */
  --imp-gold-light: #FBE9A6;   /* the bar's specular highlight */
  --imp-sheen:      rgba(255,255,255,0.55);
  --imp-sheen-clear: rgba(255,255,255,0);
  --imp-side-foil-glow: rgba(241,203,67,0.28);
  --imp-font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto,
              'Helvetica Neue', Arial, sans-serif;
  --imp-wide: 100%;

  --fs-1: 12px;
  --fs-2: 14px;
  --fs-3: 16px;
  --fs-4: 20px;
  --fs-5: 26px;
  --fs-6: 32px;

  --imp-radius:       14px;  /* cards */
  --imp-radius-ctl:   10px;  /* inputs, buttons */
  --imp-radius-pill:  12px;  /* sidebar links */

  --imp-ease: 140ms ease;
}