/*
 * finances.css — typographic + neutrals-warmth pass for the finance
 * dashboard and its sync-view siblings. Presentation only; layout,
 * information density and the indigo/amber/emerald/red colour system
 * stay exactly as they were.
 *
 * Rules that guided this file:
 *   - Cormorant Garamond is display-only (page titles, panel headings,
 *     brand, and the large hero stat values on the dashboard summary
 *     cards).  Never for tables, figure columns or inline monetary
 *     values.
 *   - DM Sans is the body face. Numeric cells use tabular-nums so
 *     digit columns align in the holdings and spending tables.
 *   - Neutrals warm one notch: cool grey page bg → warm off-white,
 *     grey-100/200 hairlines → warm hairline. Every accent stays.
 *
 * Font files are the same two woff2s shipped for fitness — not
 * duplicated here; referenced from fitness's static path via a
 * relative URL that Django ManifestStaticFilesStorage hashes at
 * collectstatic time. TODO(tech-debt): move the fonts to a genuinely
 * shared static location (e.g. `static/fonts/` at project root
 * exposed via STATICFILES_DIRS) so neither app "owns" them.
 */

/*
 * The shipped .woff2 files are variable fonts. The wght axis on
 * dm-sans is 100–1000 (usWeightClass=400 base); on cormorant it is
 * 300–700 (usWeightClass=300 base). Declaring the FULL axis range
 * on the @font-face is important: at the boundary weight some
 * browsers otherwise refuse to interpolate and fall back to
 * synthetic bold from the base weight — that's the "old font" look
 * on font-bold value cards. Widen the range so every Tailwind
 * `font-normal/medium/semibold/bold` request resolves inside the
 * declared range and interpolates cleanly along wght.
 */
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../../fitness/fonts/cormorant-garamond.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 100 1000;
    font-display: swap;
    src: url('../../fitness/fonts/dm-sans.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ---- Warm neutrals ------------------------------------------------- */
/*
 * Only the neutrals warm up. Indigo/amber/emerald/red are the app's
 * signal system and the family likes them — nothing here reaches into
 * those Tailwind classes.
 */
:root {
    --dft-serif:     'Cormorant Garamond', 'Georgia', 'Times New Roman', serif;
    --dft-sans:      'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --dft-page-bg:   #FAF8F5;   /* warm off-white — replaces gray-100 */
    --dft-hairline:  #E9E4DC;   /* warm hairline — replaces gray-100/200 */
    --dft-ink:       #23201C;   /* warm near-black — replaces gray-900 */
    --dft-muted:     #6E6960;   /* warm mid-grey    — replaces gray-500 */
    --dft-quiet:     #9A948A;   /* warm quiet-grey  — replaces gray-400 */
}

/* Body face + warm page bg. Tailwind's inline `bg-gray-100` on the
 * body was set via <style> in each template; replace it here so a
 * single stylesheet governs it. Tabular numerals ON globally so
 * every number in a table lines up without extra classes. */
html, body {
    background-color: var(--dft-page-bg);
    color: var(--dft-ink);
    font-family: var(--dft-sans);
    font-variant-numeric: tabular-nums;
}

/*
 * Warm hairline override — Tailwind's `border-gray-100`, `border-gray-200`,
 * `border-t border-gray-100` etc. are pervasive on cards and section
 * dividers.  Recolour them to the warm hairline without touching the
 * templates.  Any team member who intentionally wants a cooler grey can
 * still use `border-slate-*` or a custom class.
 */
.border-gray-100, .border-gray-200,
.divide-gray-100 > * + *, .divide-gray-200 > * + *,
.border-t.border-gray-100, .border-b.border-gray-100,
.border-t.border-gray-200, .border-b.border-gray-200 {
    border-color: var(--dft-hairline) !important;
}
/*
 * `bg-gray-50` shows up as table header stripes / soft-highlight rows.
 * Recolour to a barely-there warm tint — same read-weight, warmer tone.
 */
.bg-gray-50 { background-color: #F5F1EA !important; }
.bg-gray-100 { background-color: #EFEAE1 !important; }


/* ---- Typographic layer -------------------------------------------- */

/*
 * Cormorant is DISPLAY ONLY. Applied via these three classes rather
 * than by targeting `h1`/`h2`/`h3` directly, because plenty of
 * headings in this app carry Tailwind classes that fix their weight,
 * size and colour — and a blanket font-family override there would
 * fight those choices. Explicit opt-in keeps the diff reviewable.
 */
.dft-serif { font-family: var(--dft-serif); font-weight: 500; letter-spacing: -0.005em; }

/* Large hero stat values. RULE (revoked from first pass, no exceptions):
 * Cormorant appears on WORDS only. Every numeral is DM Sans. High-
 * contrast curvy serif fails at large numerals; the editorial
 * character belongs on the label ABOVE the stat, not on the digits.
 *
 * Semi-bold (600) reads as "hero" without triggering the synthetic-
 * bold path some browsers used to fall back to at the 700 boundary.
 * -0.01em tightens display-size digit tracking a touch. */
.dft-hero-stat {
    font-family: var(--dft-sans);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

/* Belt-and-braces: any element whose Tailwind classes shout "number"
 * (`font-mono`, `font-serif`, `tabular-nums`) should render DM Sans
 * tabular regardless of what the utility class name implies. This
 * catches numeric cells in tables + card values that pre-restyle
 * used font-mono to align columns.
 *
 * .font-mono needs !important because Tailwind's utility uses
 * `!important` on itself (JIT-generated). Without it the utility
 * wins and the number renders in the system monospace.
 */
.font-mono {
    font-family: var(--dft-sans) !important;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* Small uppercase eyebrow / sub-label — panel sub-titles get this
 * treatment instead of the raw `text-xs text-gray-400 uppercase`
 * combination, so tracking is consistent across sections. */
.dft-eyebrow {
    font-family: var(--dft-sans);
    font-size: 10.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--dft-muted);
}

/* Section rule — thin warm hairline above serif panel titles.  Used
 * on panels that want a stronger visual separator than a bare margin. */
.dft-section-rule {
    border-top: 1px solid var(--dft-hairline);
    padding-top: 18px;
    margin-top: 22px;
}

/* Every numeric column / delta / monetary value gets this so DM Sans
 * digits line up. Tables in the templates can add `dft-num` on the
 * `<td>`s that already right-align. Global body already sets
 * tabular-nums so this is mostly a semantic marker + a nudge to the
 * cascade for anywhere `font-variant-numeric` got clobbered. */
.dft-num {
    font-family: var(--dft-sans);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
}