/*
 * Walletify — the shared palette for the static pages.
 *
 * The values mirror app/lib/core/theme.dart (the LIVE Flutter app) and
 * docs/DESIGN.md. Change them in both places or in neither — and that is not
 * decoration: this file went stale once already. It carried the retired
 * Expo app's Quiet Ledger teal for a day after that app was retired
 * (2026-08-12), so the domain wore a different product than the phone. Before
 * that, when the app darkened its light amount colours for contrast, --ok
 * was left behind and callback.html's "Copied" button sat at 2.28:1 while
 * this header claimed parity. Parity is a diff, not a promise.
 *
 * CANONICAL NAMES come first. The LEGACY ALIASES beneath them exist because
 * the pages once used three different naming schemes; aliasing lets each page
 * link this one file without a single markup change. That matters most for
 * callback.html, which is a working bank-link callback whose behaviour must
 * not be touched.
 *
 * Two values are DERIVED, not copied, and only these two:
 * - light --brand-pressed #4c0ba4: the primary darkened for hover, because
 *   hover must be MORE prominent than rest and theme.dart has no pressed
 *   role (its primaryContainer is BRIGHTER than primary).
 * - dark --brand #a78bfa: the app's dark primary #8b5cf6 measures ~4.4:1 on
 *   the dark canvas — under AA for body-size links. One step lighter clears
 *   it. The app uses its primary on larger, bolder marks; a link is neither.
 * Everything else is theme.dart verbatim.
 */

/* The app's face, self-hosted NEXT TO these pages (public/fonts/, with the
   OFL). Four official static cuts — Regular / Medium / SemiBold / Bold —
   the same four weight slots the previous bundled face used. Stack is
   "Instrument Sans", "Instrument Sans Fallback". */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/InstrumentSans-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/InstrumentSans-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/InstrumentSans-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/InstrumentSans-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans Fallback";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/InstrumentSans-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans Fallback";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/InstrumentSans-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans Fallback";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/InstrumentSans-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans Fallback";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/InstrumentSans-Bold.woff2") format("woff2");
}

:root {
  /*
   * Tells the browser both themes exist, so it paints its OWN surfaces — the
   * scrollbar, form controls, the flash before first paint — to match. Without
   * it a dark page keeps a light scrollbar down the side of it.
   */
  color-scheme: light dark;

  /* Canonical — Walletify violet, light (parity with theme.dart). */
  --canvas: #fcf8ff;          /* surface */
  --surface: #ffffff;         /* surfaceContainerLowest — cards, rows */
  --surface-soft: #f5f2ff;    /* surfaceContainerLow — inset panels */
  --ink: #1b1b25;             /* onSurface */
  --mute: #4a4455;            /* onSurfaceVariant */
  --faint: #7b7487;           /* outline */
  --line: #ccc3d8;            /* outlineVariant */
  --brand: #630ed4;           /* primary */
  --brand-pressed: #4c0ba4;   /* DERIVED — see header */
  --link-hover: var(--brand-pressed);  /* darker than rest: 10.58:1 */
  --on-brand: #ffffff;        /* onPrimary */
  --ok: #0b7a45;              /* the app's amount-positive, light */
  --warn: #7a4e00;            /* the app's review amber fg, light */
  --warn-surface: #fff4e0;    /* the app's review amber bg, light */

  /* The signature gradient — the app's balance card and hero card pair. */
  --gradient-start: #7c3aed;
  --gradient-end: #630ed4;

  --font: "Instrument Sans", "Instrument Sans Fallback";

  /* Legacy aliases — index.html, privacy.html, terms.html */
  --bg: var(--canvas);
  --fg: var(--ink);
  --muted: var(--mute);
  --rule: var(--line);
  --accent: var(--brand);

  /* Legacy alias — callback.html */
  --raised: var(--surface);
  --soft: var(--surface-soft);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Walletify violet, dark — theme.dart's HAND-BUILT dark scheme, which
       mirrors light's hues at dark luminance (a fromSeed derivation
       desaturated the accents; see docs/DESIGN.md). */
    --canvas: #15131a;        /* surface */
    --surface: #1d1b24;       /* surfaceContainerLowest */
    --surface-soft: #211e2a;  /* surfaceContainer — Low is invisible on web */
    --ink: #e7e2f0;           /* onSurface */
    --mute: #a99fbc;          /* onSurfaceVariant */
    --faint: #8f8a9b;         /* outline */
    --line: #3e3a4a;          /* outlineVariant */
    --brand: #a78bfa;         /* DERIVED — see header */
    --brand-pressed: #7c3aed; /* primaryContainer; white text holds AA on it */
    /* LIGHTER THAN REST IN DARK, because "more prominent" reverses with the
     * canvas. `--brand-pressed` is a BACKGROUND token — its own comment says
     * white text holds AA ON it — and using it as a link FOREGROUND scored
     * 3.23:1 on --canvas, BELOW AA and less legible than the 6.77:1 rest
     * state. The rule three lines above `a:hover` says hover must be MORE
     * prominent than rest, not merely different; in dark that means going up.
     * 9.98:1. `callback.html` uses --brand-pressed correctly, as a button
     * background with --on-brand white on it. */
    --link-hover: #c4b5fd;
    --on-brand: #ffffff;
    --ok: #4cce8a;            /* amount-positive, dark */
    --warn: #ffcc66;          /* review amber fg, dark */
    --warn-surface: #3a2b00;  /* review amber bg, dark */
  }
}

/* The aliases above are declared with var(), so they follow the dark values
   automatically. They are not repeated here. */

/*
 * The ground. This is NOT optional decoration.
 *
 * A page that links this file but sets no background of its own gets a
 * transparent body, which the browser paints white — in BOTH themes. In dark
 * that puts --mute onto white and the text disappears completely. This exact
 * bug shipped for a minute once and was invisible to every check except
 * looking at the page in dark mode. Setting it here means a page cannot
 * forget.
 */
body {
  background: var(--canvas);
  color: var(--ink);
}

/*
 * Link and control states, once, for every page.
 *
 * Each page set only `a { color }`, so a link looked identical at rest, under
 * the cursor and under the keyboard. Hover and focus must be MORE prominent
 * than rest, not merely different, and :focus-visible rather than :focus so a
 * mouse click does not leave a ring behind.
 */
a:hover {
  color: var(--link-hover);
  text-decoration-thickness: 2px;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 2px;
}

/* No double-tap zoom delay on the links and buttons. */
a,
button {
  touch-action: manipulation;
}

/* Headings should not leave one word stranded on the last line. */
h1,
h2 {
  text-wrap: balance;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}