/* ==========================================================================
   eBoat design tokens — ported from the pep-purchasing prototype.
   Both sites (pr.* and finance.*) load this first, then base.css.

   Theme rule: the FULL light palette lives on bare :root. Dark only
   redefines the same names, twice — once for the OS preference (unless the
   user explicitly chose light) and once for an explicit [data-theme="dark"],
   so the in-app toggle wins in both directions. Never give a color its only
   definition inside a media query.
   ========================================================================== */

:root {
  /* surfaces */
  --paper: #EFF3F5;
  --surface: #FFFFFF;
  --surface-2: #E7EDF0;
  --sunk: #F5F8F9;

  /* shoal blue — the budget workbook's header fill */
  --shoal: #BDD7EE;
  --shoal-soft: #DEEAF4;

  /* text */
  --ink: #13202B;
  --ink-2: #42545F;
  --ink-3: #6E818C;

  /* lines */
  --rule: #C9D6DC;
  --rule-soft: #DFE7EA;

  /* crimson accent (Stevens Electric Boatworks logo)
     --accent      fills: button backgrounds, the switch track. White ink sits on it.
     --accent-text the same idea where the accent is TEXT or a focus ring. On light
                   backgrounds the crimson is already readable, so both are equal;
                   the dark theme has to lift the text one (see below). */
  --accent: #98102F;
  --accent-ink: #FFFFFF;
  --accent-soft: #F6E4E8;
  --accent-text: #98102F;

  /* semantic */
  --ok: #1C6B47;
  --ok-soft: #E0F0E8;
  --warn: #8F5300;
  --warn-soft: #FAEDD8;
  --info: #0B6675;
  --info-soft: #DBEFF2;
  --bad: #8F1F2A;
  --bad-soft: #F7E4E6;

  /* shape + depth */
  --shadow: 0 1px 2px rgba(19, 32, 43, .05), 0 10px 24px -18px rgba(19, 32, 43, .45);
  --shadow-lift: 0 24px 64px -20px rgba(0, 0, 0, .5);
  --radius: 7px;
  --radius-lg: 10px;

  /* type */
  --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale. Every font-size in the app comes from here, so "everything is
     too small" is one edit rather than ninety scattered px values — which is
     exactly how it got too small in the first place. The old ladder bottomed
     out at 10.5px (eyebrows, table headers) on a 14px body; nothing is under
     12px now, and secondary text that used to be 11.5px reads at 13px.
     Sizes are theme-independent, so dark never redefines these. */
  --fs-2xs: 12px;    /* uppercase micro-labels: eyebrow, table th, tile caption */
  --fs-xs: 13px;     /* secondary prose: cell-sub, hints, chips, badges */
  --fs-sm: 14px;     /* dense controls: small buttons, filters, switches */
  --fs-base: 15px;   /* body, inputs, buttons, notices */
  --fs-md: 17px;     /* panel / modal / drawer titles */
  --fs-lg: 19px;     /* a card's own headline */
  --fs-xl: 23px;     /* money figures, page titles */
  --fs-2xl: 27px;    /* the request form's one big title */

  /* layout */
  --drawer-w: 580px;
  --sidebar-w: 214px;

  /* stacking: topbar < scrim/modal < drawer < toast */
  --z-topbar: 30;
  --z-scrim: 60;
  --z-drawer: 70;
  --z-toast: 90;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0D1820;
    --surface: #14232E;
    --surface-2: #1C303D;
    --sunk: #101E28;

    --shoal: #2C5069;
    --shoal-soft: #1D3948;

    --ink: #E6EEF3;
    --ink-2: #A6BAC5;
    --ink-3: #7A919D;

    --rule: #284051;
    --rule-soft: #1F3441;

    /* Keep the brand crimson for FILLS — a lifted rose here is what read as pink.
       White ink on #C8203F is 5.6:1. Crimson as small text or a focus ring on the
       navy panels is only 2.9:1, so those use --accent-text (5.6:1) instead. */
    --accent: #C8203F;
    --accent-ink: #FFFFFF;
    --accent-soft: #3A1720;
    --accent-text: #F0736F;

    --ok: #72CE9E;
    --ok-soft: #122F20;
    --warn: #E4B063;
    --warn-soft: #31230D;
    --info: #68C6D4;
    --info-soft: #0F3138;
    --bad: #EE8C95;
    --bad-soft: #38171B;

    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 24px -18px rgba(0, 0, 0, .9);
    --shadow-lift: 0 24px 64px -20px rgba(0, 0, 0, .8);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper: #0D1820;
  --surface: #14232E;
  --surface-2: #1C303D;
  --sunk: #101E28;

  --shoal: #2C5069;
  --shoal-soft: #1D3948;

  --ink: #E6EEF3;
  --ink-2: #A6BAC5;
  --ink-3: #7A919D;

  --rule: #284051;
  --rule-soft: #1F3441;

  /* Keep this block identical to the prefers-color-scheme one above, or the
     in-app dark toggle and OS dark mode drift apart. */
  --accent: #C8203F;
  --accent-ink: #FFFFFF;
  --accent-soft: #3A1720;
  --accent-text: #F0736F;

  --ok: #72CE9E;
  --ok-soft: #122F20;
  --warn: #E4B063;
  --warn-soft: #31230D;
  --info: #68C6D4;
  --info-soft: #0F3138;
  --bad: #EE8C95;
  --bad-soft: #38171B;

  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 24px -18px rgba(0, 0, 0, .9);
  --shadow-lift: 0 24px 64px -20px rgba(0, 0, 0, .8);

  color-scheme: dark;
}