/* ==========================================================================
   Brand tokens — the only file that should ever contain a raw colour.
   ==========================================================================

   Every page links this before its own <style>. To re-theme the whole product,
   edit BLOCK 1 and nothing else.

   The palette is Wise's, read off their live stylesheet rather than eyeballed
   from screenshots, so the greens are the actual brand values and not
   approximations: bright green #9FE870 on forest #163300.

   Three blocks, in dependency order:

     1. PALETTE   raw colours. Named after what they ARE (forest, beige).
     2. SEMANTIC  named after what they DO (--bg, --accent, --line). Pages use
                  these. A colour swap touches block 1; a meaning change
                  touches block 2.
     3. LEGACY    the old purple-era variable names, re-pointed at block 2.

   Block 3 exists because app.html alone has 237 var() calls against names like
   --purple-ink. Re-pointing them moves the entire dashboard onto the new
   palette in one place, instead of 237 correct-but-risky edits across a
   3,589-line file. The names now lie about their colour, which is the price:
   treat them as deprecated, and when you touch a rule, move it to block 2.
   ========================================================================== */

/* ── 1. PALETTE ─────────────────────────────────────────────────────────── */
:root {
  /* Greens — the brand. */
  --c-green:          #9FE870;   /* bright green: CTAs, highlights            */
  --c-green-hover:    #CDFFAD;   /* Wise hovers bright green LIGHTER, not dark */
  --c-green-active:   #65CF21;
  --c-green-pale:     #E2F6D5;   /* tinted section background                 */
  --c-green-pale-2:   #ECFFE0;

  --c-forest:         #163300;   /* dark green: page background, primary text */
  --c-forest-rgb:     22, 51, 0; /* the same, as channels, for translucent use     */
  --c-forest-hover:   #0D1F00;
  --c-forest-soft:    #223D0D;   /* raised surface ON forest                  */
  --c-forest-line:    #2C4A14;   /* hairline ON forest                        */

  /* Warm neutrals — the beige/grey that carries the quieter sections. */
  --c-beige:          #F1F1ED;
  --c-beige-deep:     #E7E7E1;
  --c-neutral:        #EDEEEC;
  --c-white:          #FFFFFF;

  /* Ink. */
  --c-ink:            #0E0F0C;
  --c-charcoal:       #21231D;
  --c-slate:          #4C5C5C;
  --c-mute:           #6A7861;   /* muted text that still passes on beige     */
  --c-mute-on-dark:   #A6AE9F;

  /* Status. Desaturated to sit beside the greens without shouting. */
  --c-danger:         #B3261E;
  --c-danger-bg:      #FCEEEC;
  --c-warn:           #8A6100;
  --c-warn-bg:        #FBF3DF;
  --c-ok:             #2E6417;
  --c-ok-bg:          #E8F5DF;

  /* Rating stars. The one warm colour, kept for the thing everybody reads as a star
     rating — and the colour the same person meets on Google a minute later. */
  --c-star:           #F5A524;

  /* ── Type ─────────────────────────────────────────────────────────────
     Lora carries the brand voice at display sizes only. h1/h2 are Lora
     semibold upright; the logo is the one italic, at 700. h3 and below are
     body font — large and bold, never serif — so long UI text stays legible.  */
  --font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-logo:    'Lora', Georgia, serif;

  --w-display:    600;           /* h1/h2 — semibold, NOT bold                */
  --w-logo:       700;           /* logo — bold, and the only italic          */
  --w-heading:    700;           /* h3+ — bold body font                      */
}

/* ── 2. SEMANTIC ────────────────────────────────────────────────────────── */
:root {
  --bg:            var(--c-white);
  --surface:       var(--c-white);
  --surface-alt:   var(--c-beige);      /* the beige band between white ones  */
  --surface-sunk:  var(--c-beige-deep);
  --surface-tint:  var(--c-green-pale); /* green-tinted feature block         */
  --surface-dark:  var(--c-forest);

  --ink:           var(--c-forest);     /* headings on light                  */
  --text:          var(--c-charcoal);   /* body copy                          */
  --muted:         var(--c-mute);
  --line:          var(--c-beige-deep);
  --line-strong:   #D8D8D1;

  /* On the forest background. */
  --ink-on-dark:   var(--c-white);
  --text-on-dark:  #D6E3CB;
  --muted-on-dark: var(--c-mute-on-dark);
  --line-on-dark:  var(--c-forest-line);
  --surface-on-dark: var(--c-forest-soft);

  /* Accent = bright green. Its text is FOREST, never white — that pairing is
     the single most recognisable thing about this palette, and white-on-green
     also fails contrast at 1.7:1. */
  --accent:        var(--c-green);
  --accent-hover:  var(--c-green-hover);
  --accent-active: var(--c-green-active);
  --on-accent:     var(--c-forest);

  /* Secondary button: forest fill, white text. */
  --solid:         var(--c-forest);
  --solid-hover:   var(--c-forest-hover);
  --on-solid:      var(--c-white);

  --star:          var(--c-star);
  --star-off:      var(--line-strong);

  --focus:         var(--c-green-active);
  /* Shadows are forest, never grey or black. A shadow is the surface under it made
     darker: grey laid over beige or pale green reads as a smudge of dirt, forest reads
     as depth. So every shadow and scrim in the product takes its colour from here —
     write rgba(var(--shadow-rgb), a) for a one-off, never a grey or a black. */
  --shadow-rgb:    var(--c-forest-rgb);
  --shadow-sm:     0 2px 8px rgba(var(--shadow-rgb), .08);    /* buttons, chips          */
  --shadow:        0 10px 30px rgba(var(--shadow-rgb), .10);  /* panels                  */
  --shadow-pop:    0 18px 44px rgba(var(--shadow-rgb), .18);  /* menus that drop down    */
  --shadow-lg:     0 26px 64px rgba(var(--shadow-rgb), .18);  /* cards that float: the wizard, dialogs */
  --scrim:         rgba(var(--shadow-rgb), .55);              /* the dim behind a dialog */
  --radius:        16px;
  --radius-lg:     24px;
  --radius-pill:   999px;
  --maxw:          1180px;
}

/* ── 3. LEGACY ALIASES (deprecated — migrate on touch) ──────────────────── */
:root {
  /* --purple was the "primary fill under white text" role — the dashboard pairs it
     with color:#fff in several rules. So it maps to FOREST, not to bright green:
     white on #9FE870 is 1.7:1 and would have broken every primary button at once.
     Mapping by ROLE rather than by hue is the whole reason this block is safe. */
  --purple:       var(--solid);
  --purple-deep:  var(--solid-hover);
  --purple-ink:   var(--ink);
  --purple-soft:  var(--surface-alt);
  --purple-soft2: var(--surface-sunk);
  --purple-chip:  var(--surface-tint);

  /* --green was two roles wearing one name: a button fill, and "success" text on a
     tint. They need opposite lightness, so they split here. Anything using --green
     as a fill must set its own foreground — see .btn.green in app.html. */
  --green:        var(--accent);
  --green-deep:   var(--accent-active);
  --green-ink:    var(--c-ok);
  --green-soft:   var(--c-ok-bg);
  --green-soft2:  var(--c-green-pale-2);

  --soft:         var(--surface-alt);
  --white-input:  rgba(255, 255, 255, .85);
  --disp:         var(--font-display);
  --body:         var(--font-body);
}

/* ── Text selection ─────────────────────────────────────────────────────────
   Selecting text lands in the brand family rather than the browser's default
   blue, which clashes badly with the greens. Forest on the light green, because
   a selection you cannot read is worse than no styling at all — and because the
   default blue would otherwise reverse out white text on the forest sections.
   ::selection does not accept a comma-joined list with ::-moz-selection in the
   same rule: one unknown selector invalidates the whole block, so they are
   written separately even though the declarations are identical. */
::selection      { background: var(--c-green-hover); color: var(--c-forest); }
::-moz-selection { background: var(--c-green-hover); color: var(--c-forest); }

/* ── Base type rules ────────────────────────────────────────────────────── */
h1, h2 {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-style: normal;            /* Lora ships an italic; headings never use it */
  letter-spacing: -.01em;
  color: var(--ink);
}
h3, h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: var(--w-heading);
  letter-spacing: -.01em;
  color: var(--ink);
}

/* ── The logo lockup: mark + wordmark ───────────────────────────────────── */
.brandmark {
  display: inline-flex;
  align-items: center;
  gap: .34em;                    /* ~9px in the 26px nav; matches the widget's lockup */
  font-family: var(--font-logo);
  font-weight: var(--w-logo);
  font-style: italic;            /* the one italic in the system */
  letter-spacing: -.015em;
  color: var(--ink);
  text-decoration: none;
  line-height: 1;
}
/* The mark is a mask, not an <img>, so it inherits colour from the lockup and
   works on forest and on white without shipping a second file. */
.brandmark::before {
  content: '';
  flex: none;
  width: .96em;
  height: 1.01em;               /* the mark is very slightly taller than wide */
  background: currentColor;
  -webkit-mask: url('/images/refzy-mark.svg') no-repeat center / contain;
          mask: url('/images/refzy-mark.svg') no-repeat center / contain;
}
.brandmark .brandmark-text { font: inherit; letter-spacing: inherit; }
/* On the dark background the whole lockup flips to bright green. */
.on-dark .brandmark, .brandmark.on-dark { color: var(--accent); }