/* 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 (owner 2026-09-27): "Deep Midnight + Electric Violet" — midnight ink, cool paper,
   one violet and a cyan spark. Violet #635BFF carries white text at 4.7:1, so:
     --imp-primary        the violet FILL — the balance bar, the primary button, the current
                           link. Anywhere violet is a filled AREA.
     --imp-primary-ink    text/icons drawn ON a violet fill (white).
     --imp-primary-strong violet as TEXT/border on the page (>= 4.5:1 on surface and bg).
     --imp-accent         cyan, decorative and on the midnight panel only (never text on white).
   Both themes: the light tokens in :root, the dark ones re-inked at the bottom (P34). */

@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');
}
:root {
  /* brand — Deep Midnight + Electric Violet. Swap these few lines to rebrand. */
  --imp-primary:        #635BFF;   /* electric violet — fills */
  --imp-primary-2:      #4F46E5;   /* deeper violet — the second gradient stop */
  --imp-primary-ink:    #ffffff;   /* text/icons ON a violet fill (4.7:1 on #635BFF) */
  --imp-primary-strong: #4F46E5;   /* violet as text/border on white (6.3:1) */
  --imp-accent:         #00D4FF;   /* cyan spark: decoration and the midnight panel only */
  --imp-primary-hover:  #564EF5;
  --imp-primary-active: #463DD8;
  --imp-primary-2-hover: #4239D2;
  --imp-primary-wash:   rgba(99,91,255,0.08);   /* hover wash on white */
  --imp-primary-wash-2: rgba(99,91,255,0.15);
  --imp-primary-glow:   rgba(99,91,255,0.30);   /* primary button shadow */
  --imp-amber:  #B45309;   /* the warning rule / text (5:1 on white) */

  /* ink and paper */
  --imp-ink:      #1A1F36;   /* deep midnight ink: headings and body text */
  --imp-leather:  #1A1F36;   /* the midnight brand panel (sidebar, sign-in crest): dark in BOTH themes */
  --imp-on-ink:   #ffffff;   /* text on a fill of --imp-ink / --imp-red (inverts in dark) */
  --imp-bg:       #F6F9FC;   /* cool paper */
  --imp-surface:  #ffffff;
  --imp-text:     var(--imp-ink);
  --imp-secondary: #3C4257;
  --imp-muted:    #5B6480;   /* 5.5:1 on the paper */
  --imp-rule:     #E3E8EF;
  --imp-rule-strong: #C9D1DD;

  /* the sidebar: a deep-midnight panel */
  --imp-side-bg:    linear-gradient(175deg, #20264A 0%, #1A1F36 55%, #151A2E 100%);
  --imp-side-text:  rgba(255,255,255,0.94);
  --imp-side-muted: rgba(255,255,255,0.72);
  --imp-side-rule:  rgba(255,255,255,0.12);
  --imp-side-strong: #ffffff;
  --imp-side-hover:  rgba(255,255,255,0.07);
  --imp-side-active: rgba(255,255,255,0.14);
  --imp-side-chip:   rgba(255,255,255,0.10);
  --imp-side-chip-border: rgba(255,255,255,0.18);
  --imp-side-hint:   rgba(255,255,255,0.22);
  --imp-side-hint-clear: rgba(255,255,255,0);
  --imp-ink-clear:   rgba(26,31,54,0);   /* --imp-leather, transparent */
  --imp-ink-frame:   rgba(26,31,54,0.40);
  --imp-scrim:       rgba(10,14,32,0.55);   /* dims the page behind the phone menu drawer */
  --imp-tip-bg:      var(--imp-leather);    /* the collapsed sidebar's link-name tooltip */
  --imp-tip-text:    #ffffff;

  /* shadows */
  --imp-shadow-xs: 0 1px 2px rgba(26,31,54,0.06);
  --imp-shadow:    0 2px 10px rgba(50,50,93,0.07), 0 1px 2px rgba(26,31,54,0.05);
  --imp-shadow-md: 0 12px 28px rgba(50,50,93,0.12), 0 3px 8px rgba(26,31,54,0.07);
  --imp-shadow-side: 0 20px 50px rgba(26,31,54,0.30);
  --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(217,119,6,0.10);

  /* type */
  --imp-display: 'Bricolage', 'Manrope', system-ui, sans-serif;   /* titles and big numbers */
  --imp-gold-edge:  #3730A3;   /* the balance bar's shaded lower edge */
  --imp-gold-light: #675FFF;   /* the balance bar's lit upper edge (white text still >= 4.5:1) */
  --imp-sheen:      rgba(255,255,255,0.30);
  --imp-sheen-clear: rgba(255,255,255,0);
  --imp-side-foil-glow: rgba(0,212,255,0.22);   /* the cyan halo under the current link */
  --imp-font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto,
              'Helvetica Neue', Arial, sans-serif;
  --imp-wide: 100%;
  color-scheme: light;

  /* P37 type scale: the ONLY font sizes the signed-in app uses (the landing keeps its own).
     --fs-0 is for badges and counters only; --fs-7 is the page title. */
  --fs-0: 11px;
  --fs-1: 12px;
  --fs-2: 14px;
  --fs-3: 16px;
  --fs-4: 20px;
  --fs-5: 26px;
  --fs-6: 32px;
  --fs-7: clamp(26px, 1vw + 18px, 34px);

  /* P37 spacing: one 4px rhythm for every padding, margin and gap. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 64px;
  --gap-section: var(--sp-6);   /* between stacked cards and page sections */
  --pad-card: var(--sp-5);      /* inside a card */
  --form-max: 640px;            /* single-column forms (address, profile) */

  --imp-radius:       14px;  /* cards */
  --imp-radius-ctl:   10px;  /* inputs, buttons */
  --imp-radius-pill:  12px;  /* sidebar links */
  --imp-radius-lg:    20px;  /* the big surfaces: sidebar panel, dialogs */
  --imp-radius-badge: 999px; /* badges, chips, pills */

  --imp-ease: 140ms ease;

  /* P34 landing (css/imp-landing.css): the sample label is paper in BOTH themes, so its paper and
     print stay fixed; the cyan and violet glows light the midnight hero stage. */
  --imp-paper:        #ffffff;
  --imp-print:        #000000;
  --imp-paper-edge:   rgba(26,31,54,0.18);
  --imp-accent-clear: rgba(0,212,255,0);
  --imp-accent-soft:  rgba(0,212,255,0.18);
  --imp-accent-line:  rgba(0,212,255,0.85);
  --imp-primary-halo: rgba(99,91,255,0.45);
  --imp-primary-halo-clear: rgba(99,91,255,0);
}

/* Dark appearance (P34). The same tokens, re-inked: night-blue surfaces, moonlight text,
   a brighter violet for text, the cyan spark unchanged. Two identical blocks: the first
   follows the OS when the visitor has not chosen (js/theme.js sets data-theme only on an
   explicit choice), the second is that explicit choice. Keep them identical
   (tests/theme.test.js checks). Violet FILLS and the white on them stay as in light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --imp-primary-strong: #A5A0FF;   /* violet as text on midnight (7.6:1 on the surface) */
    --imp-primary-wash:   rgba(124,117,255,0.12);
    --imp-primary-wash-2: rgba(124,117,255,0.22);
    --imp-primary-glow:   rgba(99,91,255,0.40);
    --imp-amber:  #F5B454;
    --imp-ink:      #E8ECF7;   /* moonlight text (14.9:1 on the surface) */
    --imp-leather:  #161C33;
    --imp-on-ink:   #0B1020;
    --imp-bg:       #0B1020;   /* night midnight */
    --imp-surface:  #12182B;   /* raised panel */
    --imp-secondary: #C3CADB;
    --imp-muted:    #97A0BA;   /* 6.8:1 on the surface */
    --imp-rule:     #232B45;
    --imp-rule-strong: #343F63;
    --imp-side-bg:    linear-gradient(175deg, #1A2138 0%, #141A2F 55%, #10152A 100%);
    --imp-ink-clear:  rgba(22,28,51,0);
    --imp-ink-frame:  rgba(0,0,0,0.62);
    --imp-scrim:      rgba(0,0,0,0.62);
    --imp-tip-bg:     #232B45;
    --imp-shadow-xs: 0 1px 2px rgba(0,0,0,0.40);
    --imp-shadow:    0 2px 10px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.30);
    --imp-shadow-md: 0 12px 28px rgba(0,0,0,0.50), 0 3px 8px rgba(0,0,0,0.35);
    --imp-shadow-side: 0 20px 50px rgba(0,0,0,0.55);
    --imp-red:   #FF8A80;
    --imp-green: #4ADE9A;
    --imp-red-wash:   rgba(255,138,128,0.12);
    --imp-green-wash: rgba(74,222,154,0.12);
    --imp-amber-wash: rgba(245,180,84,0.14);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --imp-primary-strong: #A5A0FF;   /* violet as text on midnight (7.6:1 on the surface) */
  --imp-primary-wash:   rgba(124,117,255,0.12);
  --imp-primary-wash-2: rgba(124,117,255,0.22);
  --imp-primary-glow:   rgba(99,91,255,0.40);
  --imp-amber:  #F5B454;
  --imp-ink:      #E8ECF7;   /* moonlight text (14.9:1 on the surface) */
  --imp-leather:  #161C33;
  --imp-on-ink:   #0B1020;
  --imp-bg:       #0B1020;   /* night midnight */
  --imp-surface:  #12182B;   /* raised panel */
  --imp-secondary: #C3CADB;
  --imp-muted:    #97A0BA;   /* 6.8:1 on the surface */
  --imp-rule:     #232B45;
  --imp-rule-strong: #343F63;
  --imp-side-bg:    linear-gradient(175deg, #1A2138 0%, #141A2F 55%, #10152A 100%);
  --imp-ink-clear:  rgba(22,28,51,0);
  --imp-ink-frame:  rgba(0,0,0,0.62);
  --imp-scrim:      rgba(0,0,0,0.62);
  --imp-tip-bg:     #232B45;
  --imp-shadow-xs: 0 1px 2px rgba(0,0,0,0.40);
  --imp-shadow:    0 2px 10px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.30);
  --imp-shadow-md: 0 12px 28px rgba(0,0,0,0.50), 0 3px 8px rgba(0,0,0,0.35);
  --imp-shadow-side: 0 20px 50px rgba(0,0,0,0.55);
  --imp-red:   #FF8A80;
  --imp-green: #4ADE9A;
  --imp-red-wash:   rgba(255,138,128,0.12);
  --imp-green-wash: rgba(74,222,154,0.12);
  --imp-amber-wash: rgba(245,180,84,0.14);
}