/* =======================================================
   FISSY BRAND — single source of truth for color and type
   -------------------------------------------------------
   Loaded BEFORE tools.css and before any theme-*.css, so
   everything downstream can consume these tokens with
   var(). Nothing in this file styles an element directly:
   it only declares what "Fissy" looks like.

   Colours are SAMPLED from assets/img/fissy-logo-dark.png,
   which is the arbiter when the site and the tools disagree.
   Type matches fissyapp.com: Montserrat + DM Sans.

   If a brand value has to change, it changes HERE and
   nowhere else.
   ======================================================= */

:root {
    /* ── Core brand ─────────────────────────────────────
       --fissy-teal is the logo teal, used on light
       surfaces (header, light theme, print).
       --fissy-teal-bright is the same hue lifted for dark
       surfaces, where the base teal goes muddy.        */
    --fissy-teal:        #12b89b;
    --fissy-teal-d:      #0d9680;
    --fissy-teal-bright: #1fd8b6;
    --fissy-purple:      #7030a0;
    --fissy-gold:        #fcd743;

    /* The logo purple is too dark to read as a line on a near-black chart,
       so charts use this lifted violet as the brand's "second series". */
    --fissy-violet-line: #a78bfa;

    /* Tints — pre-mixed so callers never hand-roll rgba() */
    --fissy-teal-soft:   rgba(18, 184, 155, 0.10);
    --fissy-teal-glow:   rgba(31, 216, 182, 0.28);

    /* ── Brand gradient (logo purple → logo teal) ────── */
    --fissy-gradient:    linear-gradient(135deg, var(--fissy-purple), var(--fissy-teal-bright));
    --fissy-gradient-h:  linear-gradient(90deg,  var(--fissy-purple), var(--fissy-teal-bright));

    /* ── Type ───────────────────────────────────────────
       Montserrat for headings and UI chrome, DM Sans for
       running text — the pairing already used on
       fissyapp.com. The system stack stays as the
       fallback so a blocked font request degrades to
       what the tools looked like before.               */
    --fissy-font-head: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont,
                       "Segoe UI", sans-serif;
    --fissy-font-body: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont,
                       "SF Pro Text", "Segoe UI", sans-serif;

    /* Numbers in a calculator must line up in columns and
       never let a 1 be narrower than a 7. */
    --fissy-font-num:  "DM Sans", system-ui, sans-serif;
    --fissy-num-feat:  "tnum" 1, "lnum" 1;
}

/* Headings carry the brand voice everywhere, including
   inside the games (#game-root) which set their own
   font-family on every descendant. */
h1, h2, h3, h4,
.page-header h1,
.g-hero__title {
    font-family: var(--fissy-font-head);
    letter-spacing: -0.01em;
}

/* Tabular figures wherever a money value is rendered, so
   results don't jitter as the user types. */
.rv-answer,
.rv-answer *,
[data-money],
.money,
.tool-number {
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: var(--fissy-num-feat);
}