/**
 * THEME — the single place to re-skin the whole flow.
 *
 * Every colour and font in the app is pulled from the custom properties
 * below via var(...) — nothing in app.css hardcodes a colour or a font
 * outside of this file. Change a value here and it applies everywhere
 * that token is used, across all four steps.
 *
 * The "derived tones" further down are computed from the tokens above
 * with color-mix() — e.g. --accent-soft is always "--accent at 20%
 * opacity". You don't need to touch them: change --accent and every
 * glow, wash and soft background that's based on it updates automatically.
 */
:root{

  /* ---- Fonts --------------------------------------------------------- */
  --font-heading: 'Fraunces', serif;   /* italic display font: titles, names */
  --font-body: 'Manrope', system-ui, sans-serif; /* everything else */

  /* ---- Brand colours -------------------------------------------------- */
  --accent:   #D3985B; /* primary brand colour: buttons, active states, glows */
  --accent-2: #F5C384; /* lighter partner, used in gradients alongside --accent */
  --ink:      #2b1a08; /* text/icon colour placed ON TOP of accent-coloured fills */

  /* ---- Surfaces --------------------------------------------------------
     bg-deep  = page background, behind the phone frame
     bg-panel = the phone frame itself, and every card/input inside it
     (cards intentionally match the panel — separation comes from borders) */
  --bg-deep:  #0a090d;
  --bg-panel: #0E0E10;

  /* ---- Text ------------------------------------------------------------ */
  --text:       #f4ede4; /* primary text */
  --text-dim:   #a99cb0; /* secondary text, labels */
  --text-faint: #6f6577; /* tertiary text, placeholders, hints */

  /* Base hue for neutral borders and subtle washes (toggle tracks, hairline
     dividers). Kept separate from --text because it's a cooler, more
     neutral tone used only for translucent overlays, not for type. */
  --frost: #f4e8ff;

  /* ---- Fixed utility tones ----------------------------------------------
     Not part of the brand palette — the sending-overlay backdrop.
     Safe to leave as-is when re-skinning; only touch this for a
     fundamentally different (e.g. light-mode) treatment. */
  --overlay-scrim: rgba(8, 7, 10, 0.88);

  /* ---- Derived tones — computed from the tokens above ------------------ */
  --accent-soft:        color-mix(in srgb, var(--accent) 20%, transparent);
  --accent-soft-strong: color-mix(in srgb, var(--accent) 44%, transparent);
  --accent-glow:        color-mix(in srgb, var(--accent) 28%, transparent);
  --accent-glow-soft:   color-mix(in srgb, var(--accent) 16%, transparent);

  --border:        color-mix(in srgb, var(--frost) 9%, transparent);
  --border-strong: color-mix(in srgb, var(--frost) 16%, transparent);
  --wash:          color-mix(in srgb, var(--frost) 4.5%, transparent);
  --wash-strong:   color-mix(in srgb, var(--frost) 8%, transparent);

  font-size: 16px;
}