/* ==========================================================================
   HomeRP design tokens — the "Hearth" direction (#104)
   ==========================================================================

   Single source of truth for the design system. Every colour, radius, spacing
   step, elevation and type step is declared here exactly once. Components
   consume these variables and never hold a literal.

   "Hearth" replaces the "Ledger" direction shipped in 0.3.0 (epic #77, 2026-10-19),
   which the owner rejected as *"bland"* and *"very difficult to use on a mobile
   device"*. Epic #103 records the supersession. What changed here, and why:

     - Ledger was chosen for maintainability ("closest to Bootstrap's defaults").
       Hearth is a **warm household register**: cream paper surfaces, terracotta
       accent, an espresso hero panel, soft warm elevation.
     - **The type scale was rebuilt mobile-first.** Ledger's 14px root with a .85rem
       body rendered body text at ~11.9px and table headers at 9.5px. Root is now
       16px, body 15px, and **nothing may render below 14px** — enforced by
       TypographyScaleTests, not by review.
     - **Elevation is back.** Ledger was flat by decree (--card-shadow: none); Hearth
       uses soft, warm shadows.

   A *theme is a token override*: `html[data-theme="dark"]` re-points the colour
   tokens and nothing else changes, because no component branches on the theme.
   The control that selects a theme is epic #87.

   Naming
     --bg/--surface/--sunken   page / card / inset surfaces
     --ink/--heading/--muted   body, heading and de-emphasised text
     --line                    hairlines and card borders
     --accent*                 the terracotta interactive colour and its states
     --hero-*                  the espresso balance panel and its contents
     --pos/--neg/--warn        semantic direction of money and warnings
     --badge-*                 status pill pairs (bg + fg)
     --mod-2                   second module-identity dot colour
     --r-… / --elev-… / --space-…  radius, elevation, spacing
     --fs-… / --fw-…             type scale and weights

   (Note: never write a token glob in a comment ending with a star followed by a
   slash — it closes the comment early and the browser then swallows the whole
   :root block. Caught only by rendering; CssFormTests now guards it.)
     --font-body/--font-display  Inter (everything) / Fraunces (headings + figures)

   HISTORY. The 0.3.0 names (--brand*, --page-bg, --card-bg, --text, --radius,
   --card-radius, …) were carried as aliases onto the Hearth tokens while
   #105–#108 rolled Hearth out. **#109 deleted them:** every stylesheet now
   consumes the canonical names above, and DeprecatedTokenTests fails if a
   Ledger name reappears anywhere in the shipped CSS.
   ========================================================================== */

:root {
    /* --- surfaces ------------------------------------------------------- */
    --bg: #f7f1e8;      /* warm paper — the page behind everything */
    --surface: #fffdf8; /* cards, bars, sheets */
    --sunken: #f3ebdf;  /* inset fills: icon tiles, progress tracks, row fills */

    /* --- text ----------------------------------------------------------- */
    --ink: #2a211c;        /* 14.03:1 on --bg, 15.50:1 on --surface */
    --heading: #1c1512;    /* a shade deeper, so headings carry weight */
    /* #104 audit: #7c6a5c read 4.36:1 on --sunken, and muted text sits on sunken
       fills (row context lines, icon tiles) — darkened to clear AA there too. */
    --muted: #756454;      /* 5.04:1 on --bg, 5.57:1 on --surface, 4.79:1 on --sunken */
    --line: #ebdfcf;       /* hairlines and card borders */

    /* --- accent --------------------------------------------------------- */
    /* #104 audit: #b8552f cleared AA on --surface (4.72:1) but NOT on --bg (4.27:1)
       and NOT on --accent-soft (3.87:1) — the active-nav fill, which is the most-used
       state in the shell. Deepened one step: still terracotta, now clears all three. */
    --accent: #a34a26;          /* 5.25:1 on --bg, 5.79:1 on --surface, 4.75:1 on --accent-soft */
    --accent-hover: #8f411d;    /* darker than --accent, so hover still reads as a state */
    --accent-soft: #f8e3d5;     /* active nav fill, icon tiles, focus halo */
    --accent-ring: rgba(163, 74, 38, .25);
    --on-accent: #fff8f0;       /* 5.59:1 on --accent */

    /* --- the hero (balance) panel ---------------------------------------- */
    --hero-bg: #2f241d;      /* espresso */
    --hero-fg: #f6ece0;      /* 12.94:1 on --hero-bg */
    --hero-muted: #cbb6a2;   /* 7.73:1 on --hero-bg */
    --hero-accent: #e0a34a;  /* the ochre progress fill — decorative, no text */
    --hero-pos: #a8e0b6;     /* a rising delta — 10.07:1 on --hero-bg */
    --hero-neg: #f0a08a;     /* a falling delta — 7.26:1 on --hero-bg */
    --hero-link: #f0c98a;    /* the hero's arrow link — 9.65:1 on --hero-bg */

    /* --- semantic ------------------------------------------------------- */
    --pos: #3d7a4e;     /* income / on track — 5.05:1 on --surface */
    --neg: #a34a26;     /* outflow / over budget — same terracotta as --accent (5.79:1) */
    --warn: #8f5f14;    /* 5.41:1 on --surface, 4.90:1 on --bg */
    --warn-bg: #fdf1de;
    --danger: #b3261e;  /* validation errors — 6.43:1 on --surface */

    /* --- module identity ------------------------------------------------- */
    /* Identity is a dot, not a colour token per module: --accent (household),
       --mod-2 (business) and --neg (credit) cover the four account kinds. */
    --mod-2: #7d8f45;   /* olive */

    /* --- status badges --------------------------------------------------- */
    --badge-bg: #f8e3d5;
    --badge-fg: #8f3d1c;        /* 5.94:1 */
    --badge-grey-bg: #efe9e0;
    --badge-grey-fg: #5f5245;   /* 6.26:1 */
    --badge-amber-bg: #fbeed6;
    --badge-amber-fg: #8a5300;  /* 5.52:1 */
    --badge-green-bg: #e2f0e5;
    --badge-green-fg: #2d6b40;  /* 5.42:1 */
    --badge-red-bg: #fbe3df;
    --badge-red-fg: #a02218;    /* 6.27:1 */

    /* --- forms ----------------------------------------------------------- */
    --input-bg: #fffdf8;
    --input-border: #d9c9b4;
    --input-placeholder: #7c6a5c;  /* 5.07:1 on --input-bg */

    /* --- shell ----------------------------------------------------------- */
    /* Hearth's desktop sidebar is the card surface rather than a white slab, so
       these are real values and not aliases — the contrast test reads them. */
    --topbar-bg: #fffdf8;
    --sidebar-bg: #fffdf8;
    --sidebar-fg: #4a3d33;         /* 10.30:1 */
    --sidebar-muted: #7c6a5c;      /* 5.07:1 */
    --sidebar-active-bg: #f8e3d5;
    --sidebar-active-fg: #8f3d1c;  /* 5.94:1 on the active fill */
    --sidebar-border: #ebdfcf;

    /* --- overlay --------------------------------------------------------- */
    --scrim: rgba(28, 21, 18, .45);

    /* --- radius ---------------------------------------------------------- */
    --r-card: 20px;   /* cards, panels, the hero */
    --r-ctl: 12px;    /* buttons, inputs, nav rows, chips */
    --r-sm: 8px;      /* small chips and inner marks */
    --r-lg: 16px;     /* the state icon tile */
    --r-pill: 999px;  /* badges */

    /* --- elevation ------------------------------------------------------- */
    /* Warm, not neutral: the shadow carries the same brown as the palette.
       Ledger's `--card-shadow: none` is deliberately gone. */
    --elev-1: 0 1px 2px rgba(90, 55, 30, .05), 0 10px 26px rgba(90, 55, 30, .07);
    --elev-2: 0 6px 16px rgba(90, 55, 30, .10), 0 18px 40px rgba(90, 55, 30, .10);

    /* --- spacing (4px base) ---------------------------------------------- */
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;

    /* --- type ------------------------------------------------------------ */
    --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

    /* Root 16px, body 15px. **No step is below 14px** — see TypographyScaleTests.
       Ledger shipped a 14px root with a .85rem body (~11.9px) and .68rem labels
       (9.5px), which is the single biggest reason the 0.3.0 UI was unusable on a
       phone. There is deliberately no 13px "xs" step: 14px is the floor. */
    --fs-root: 16px;
    --fs-sm: 14px;      /* labels, table headers, badges, help text */
    --fs-base: 15px;    /* body copy */
    --fs-md: 16px;      /* controls and inputs — the iOS no-zoom threshold */
    --fs-lg: 19px;      /* section headings */
    --fs-xl: 22px;      /* KPI figures */
    --fs-2xl: 28px;     /* page titles */
    --fs-metric: 30px;  /* the hero figure */
    --fs-input: var(--fs-md); /* named separately because #108 pins it */

    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --heading-weight: 600;   /* Fraunces 600 — headings only */
    --heading-tracking: -.01em;
    --label-tracking: .07em;
    --leading: 1.5;

    /* --- layout ---------------------------------------------------------- */
    --sidebar-width: 250px;
    --topbar-height: 3.75rem;         /* desktop top bar (60px) */
    --topbar-height-compact: 3.25rem; /* phone top bar (52px) — #105 */
    --tabbar-height: 3.75rem;         /* phone bottom tab bar (60px) — 5 labels at 14px (#107) */
    --content-max: 1180px;
    --content-pad-x: 1.75rem;
    --focus-width: 2px;
    --ctl-h: 44px;      /* the interactive minimum; #108 applies it to controls */

    color-scheme: light;
}

/* ==========================================================================
   Dark theme — a pure token swap.
   A *warm* dark rather than a neutral one: the surfaces keep the brown of the
   palette instead of going blue-grey. The control that selects it is epic #87.
   ========================================================================== */
html[data-theme="dark"] {
    --bg: #171210;
    --surface: #201917;
    --sunken: #2a211d;

    --ink: #f4e9df;      /* 15.54:1 on --bg */
    --heading: #fdf6ee;
    --muted: #b6a496;    /* 7.73:1 on --bg */
    --line: #332a25;

    --accent: #e08b62;   /* 6.63:1 on --surface */
    --accent-hover: #eda47f;
    --accent-soft: #3a2a20;
    --accent-ring: rgba(224, 139, 98, .30);
    --on-accent: #1a1210;

    --hero-bg: #0f0b09;
    --hero-fg: #f7ede2;
    --hero-muted: #c0ae9c;
    --hero-accent: #e0a34a;
    --hero-pos: #a8e0b6;
    --hero-neg: #f0a08a;
    --hero-link: #f0c98a;

    --pos: #7fd09a;
    --neg: #f0a184;
    --warn: #e8b25f;
    --warn-bg: #2a2117;
    --danger: #f08a80;

    --mod-2: #b3c47a;

    --badge-bg: #3a2a20;
    --badge-fg: #f0b08a;
    --badge-grey-bg: #2b2320;
    --badge-grey-fg: #c3b3a4;
    --badge-amber-bg: #3a2b16;
    --badge-amber-fg: #f0bb6a;
    --badge-green-bg: #18301f;
    --badge-green-fg: #7fd09a;
    --badge-red-bg: #3a1c18;
    --badge-red-fg: #f2988c;

    --input-bg: #171210;
    --input-border: #4a3c32;
    --input-placeholder: #b6a496;

    --topbar-bg: #1b1512;
    --sidebar-bg: #14100e;
    --sidebar-fg: #e6d7c9;
    --sidebar-muted: #b6a496;
    --sidebar-active-bg: #33261e;
    --sidebar-active-fg: #fdf6ee;
    --sidebar-border: #2c221d;

    --scrim: rgba(0, 0, 0, .55);

    --elev-1: 0 1px 2px rgba(0, 0, 0, .40), 0 10px 26px rgba(0, 0, 0, .40);
    --elev-2: 0 6px 16px rgba(0, 0, 0, .50), 0 18px 40px rgba(0, 0, 0, .50);

    /* native scrollbars and form controls follow the theme */
    color-scheme: dark;
}

html[data-theme="light"] {
    color-scheme: light;
}