/* Biz2Cred design tokens — cool-SaaS palette (dark default), 2026-07-28.
   THE single source of truth. Consumed by both shells as:
       <link rel="stylesheet" href="_content/Biz2Cred.Ui/tokens.css" />
   Previously this block was duplicated in Biz2Cred.Member/wwwroot/app.css and
   Biz2Cred.Web/wwwroot/app.css and kept in sync by hand. Do not re-fork it.

   Token NAMES are historical rather than descriptive: --gold is green, --paper is
   near-black. They were kept through the 2026-07-28 re-skin so the ~1300 var()
   references in page-level <style> blocks kept resolving. Renaming is a separate
   mechanical pass.

   Role split that matters when editing:
     --gold       accent used as a FILL (background/border). Carries white text.
     --gold-deep  accent used as TEXT (links, numerals, eyebrows) on the page surface.
   These are NOT interchangeable on a dark background — a green bright enough to read
   as text fails as a fill behind white text, and vice versa. Pick by role, not shade.
   The same applies to each semantic tone and its paired -bg chip tone. */

/* Declare cascade-layer order up front, from the FIRST stylesheet the page loads.

   Layer precedence is fixed by order of first appearance, not by file order, so stating
   it here decouples the two. Without this, preflight would land in `base` alongside
   app.css's element rules and — being loaded later — would win, silently resetting the
   heading scale. Unlayered page <style> blocks still outrank everything, which is how a
   page overrides a utility. */
@layer preflight, base, components, utilities;

:root {
    /* Surfaces.

       --surface is NAVY-TINTED, not neutral grey, and --hairline is GREEN-tinted. This
       is the single biggest reason the reference design reads as designed rather than as
       "dark mode applied to a light layout": its cards sit at #10181a inside a #18302f
       border, so every panel carries a trace of the brand hue instead of being grey on
       black. Measured off the reference, not guessed. */
    --paper: #090909;
    --surface: #10181a;
    --surface-raised: #162224;
    --surface-tint: #18302f;

    /* Text */
    --ink: #ffffff;
    --ink-soft: #eeeeee;
    --muted: #aaaaaa;

    /* Lines — green-tinted to match the surfaces they enclose. */
    --hairline: #18302f;
    --line: #22403d;

    /* Accents */
    --gold: #08814a;
    --gold-deep: #35f39d;
    --navy: #10181a;

    /* Zone semantics — text tone paired with its own chip/fill tone, because a single
       value cannot serve both roles legibly on a dark surface. */
    --success: #48cf91;
    --success-bg: #114e0b;
    --warning: #e3d27a;
    --warning-bg: #5e5515;
    --danger: #ff8b8b;
    --danger-bg: #3b0b0b;

    /* Focus ring — deliberately blue, not brand green, so focus never reads as a
       success/accent state. */
    --focus: #2d62ff;

    /* Payment-history semantics — credit-report drill-down and compact status grids. */
    --status-ok: #48cf91;
    --status-late: #e3d27a;
    --status-derog: #ff8b8b;
    --status-nodata: #333333;

    /* Raw channel triplets, for alpha compositing: rgba(var(--accent-rgb), 0.08).
       Needed because you cannot apply an alpha to an existing hex token in plain CSS.

       --accent-rgb intentionally carries the BRIGHT green, not --gold. Low-alpha tints
       of the darker fill green vanish against a near-black surface; the bright green
       still reads as a wash at 0.06-0.12.

       --shadow-rgb stays black in BOTH themes. Shadows were authored as tints of the
       old dark ink; now that ink is white, reusing it would turn every shadow into a
       glow. */
    --accent-rgb: 53, 243, 157;
    --shadow-rgb: 0, 0, 0;
    --success-rgb: 72, 207, 145;
    --warning-rgb: 227, 210, 122;
    --danger-rgb: 255, 139, 139;
    --navy-rgb: 16, 24, 26;
    --tint-rgb: 24, 48, 47;
    --muted-rgb: 170, 170, 170;

    /* GEOMETRY.

       The re-skin changed hues but kept the warm-paper geometry: 2-4px radii and tight
       padding, which read as a recolour rather than a new design. These are the
       reference's values, scaled for an application rather than a marketing page --
       its 32px card padding and 64px headings belong on a landing page, not on a
       dashboard carrying twenty nav items and credit-report tables.

       Named --r-* rather than --radius-*: Tailwind's @theme owns the --radius-*
       namespace, and mapping a theme key onto an identically named variable is
       self-referential. */
    --r-sm: 4px;     /* inputs, chips, small controls */
    --r-md: 8px;     /* cards, panels, tiles -- the default */
    --r-lg: 12px;    /* hero / feature surfaces */
    --r-pill: 999px;

    /* Card interior. Was ~1.1rem; the reference uses 32px. 1.5rem splits the difference
       at application density. */
    --pad-card: 1.5rem;

    /* Signature accent wash: a soft green bloom from the top edge of a feature surface.
       This is the reference's most recognisable treatment and we had nothing like it. */
    --wash-accent: radial-gradient(circle farthest-side at 50% -30%,
        rgba(var(--accent-rgb), 0.10), transparent 70%);
}

/* Light variant. Same token names, cool neutrals — NOT the old warm paper.
   Flip the whole app by setting data-theme="light" on <html>. */
/* Geometry tokens above are theme-independent and are NOT redeclared here. */
[data-theme="light"] {
    --paper: #fafafa;
    --surface: #ffffff;
    --surface-raised: #f6f8f7;
    --surface-tint: #eef4f1;

    --ink: #090909;
    --ink-soft: #222222;
    --muted: #666666;

    /* Carries the same faint green cast as the dark theme's borders, so the two themes
       read as one design rather than two. */
    --hairline: #dde7e3;
    --line: #c4d4cf;

    --gold: #08814a;
    --gold-deep: #055732;
    --navy: #10181a;

    --success: #055732;
    --success-bg: #cef5ca;
    --warning: #5e5515;
    --warning-bg: #fcf8d8;
    --danger: #8a1f1f;
    --danger-bg: #f8e4e4;

    --focus: #2d62ff;

    --status-ok: #055732;
    --status-late: #5e5515;
    --status-derog: #8a1f1f;
    --status-nodata: #e2e2e2;

    /* Light flips to the darker fill green — on a white surface the bright green
       washes out at low alpha, the inverse of the dark-theme problem. */
    --accent-rgb: 9, 147, 84;
    --shadow-rgb: 0, 0, 0;
    --success-rgb: 5, 87, 50;
    --warning-rgb: 94, 85, 21;
    --danger-rgb: 138, 31, 31;
    --navy-rgb: 16, 24, 26;
    --tint-rgb: 243, 243, 243;
    --muted-rgb: 102, 102, 102;
}