/* TaskVault design tokens — the « Vault » direction. ONE :root palette (light « Papier »), dark « Coffre »
   via html[data-theme="dark"] — and the same Coffre values on any .theme-coffre element (landing hero,
   escrow receipt), whatever the page theme. The site renders dark only, so Coffre is what ships.
   base.html loads this FIRST; lowbid-components.css and tailwind.css read these var(--*).
   The DNA: a deep blue-steel vault, machined surfaces (1px hairline + a faint top bevel), 8–16px corners,
   a cold mint / cobalt glow behind the page. ONE accent — Signal, vault mint — and it means money: a
   signature that moves funds, locked funds, the live dot. Everything on chain (amounts, addresses,
   hashes) is set in mono. */

:root {
    /* Signal (vault mint) — the only accent hue */
    --brand-500: #2FD9A6;
    --brand-600: #1FBF8F;
    --brand-700: #0B6E52;          /* mint-family TEXT on the light canvas (≥ 4.5:1) */
    --brand-800: #08573F;
    --brand-hover: #26C998;
    --brand-soft: rgba(47,217,166,0.18);
    --brand-ink: #04160F;          /* text on a filled Signal surface */

    /* Brand RGB triplets for Tailwind alpha utilities (bg-brand-500/20 …) */
    --brand-50-rgb:  233 252 245;
    --brand-100-rgb: 200 247 231;
    --brand-200-rgb: 150 240 211;
    --brand-300-rgb: 98 230 190;
    --brand-400-rgb: 66 224 178;
    --brand-500-rgb: 47 217 166;
    --brand-600-rgb: 31 191 143;
    --brand-700-rgb: 11 110 82;
    --brand-800-rgb: 8 87 63;
    --brand-900-rgb: 6 64 47;
    --brand-950-rgb: 3 36 26;

    /* Ink — graphite on paper, steel-white in the vault: primary off-chain actions, active chip */
    --ink: #151922;
    --ink-hover: #2A303C;
    --on-ink: #F1F3F5;
    --icon-accent: var(--ink);     /* accent icons: graphite on paper, Signal in the Coffre */
    --bevel: rgba(255,255,255,0.7); /* the 1px top highlight of a machined surface */

    /* Secondary + accent — occasional (identicon / data) */
    --secondary-500: #3E6BE0;
    --secondary-soft: rgba(62,107,224,0.12);
    --accent-500: #C2410C;
    --accent-soft: rgba(194,65,12,0.12);

    /* Status — soft tinted fills with dark text (≥ 4.5:1 on their fill) */
    --success: #1E7A52;
    --success-soft: #DDF1E6;
    --warning: #8A5A00;
    --warning-soft: #FFF3C4;
    --error: #B42318;
    --error-soft: #FBE4E1;
    --on-error: #FFFFFF;
    --info: #2F4F86;
    --info-soft: #E3E9F5;

    --ui-badge-ok-text:     #14593B;
    --ui-badge-attn-text:   #6B4600;
    --ui-badge-danger-text: #A12A22;
    --ui-badge-brand-text:  var(--brand-ink);
    --ui-badge-info-text:   #29467A;

    /* Type scale — Meta 12 / Body 14 / Heading 15.5 / Display 30 */
    --text-meta:    0.75rem;
    --text-body:    0.875rem;
    --text-heading: 0.97rem;
    --text-display: 1.85rem;
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;

    /* Surfaces / text / borders */
    --bg-1: #F1F3F5;
    --bg-2: #F1F3F5;
    --bg-3: #F1F3F5;
    --surface: #FBFCFC;
    --surface-soft: #E8EBEF;       /* chips, inset tiles, empty identicon cells */
    --text-main: #151922;
    --text-muted: #4F5664;
    --text-faint: #6F7582;         /* trailing decimals, placeholders (≥ 4.5:1 on surface) */
    --text: var(--text-main);
    --muted: var(--text-muted);
    --border: #DDE1E6;
    --border-strong: #C9CED6;
    --rule: var(--ink);            /* the heavy top rule of a ledger line */
    --shadow: none;
    --shadow-pop: 0 16px 36px -18px rgba(21,25,34,0.32);
    --backdrop: rgba(14,17,23,0.45);
    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-sm: 8px;
    --radius-xs: 5px;

    --glass-bg: var(--surface);
    --glass-border: var(--border);
    --glass-shadow: var(--shadow);
    --soft-bg: var(--surface-soft);
    --soft-border: var(--border);
    --hover-border: var(--border-strong);
    --hover-shadow: 0 6px 18px -14px rgba(21,25,34,0.35);
    --glow-1: transparent;
    --glow-2: transparent;
    --divider: #E3E6EA;
    --row-hover: #F5F7F8;
    --focus-ring: rgba(21,25,34,0.3);

    /* Navbar */
    --nav-bg: rgba(241,243,245,0.92);
    --nav-border: var(--border);
    --nav-link-hover-bg: var(--surface-soft);
    --nav-active: var(--ink);
}

/* COFFRE — the vault. The dark theme (the only one the site renders), and the fixed surface of the landing
   hero + escrow receipts. Blue-steel steps: bg-3 (deepest) → bg-1 → surface → surface-soft. */
html[data-theme="dark"], .theme-coffre {
    --brand-500: #34E5B0;
    --brand-600: #34E5B0;
    --brand-700: #34E5B0;
    --brand-800: #7FF2CF;
    --brand-hover: #5EEDC2;
    --brand-soft: rgba(52,229,176,0.13);
    --brand-ink: #03150E;          /* 12:1 on the mint fill */
    --brand-500-rgb: 52 229 176;

    --ink: #E8EDF4;
    --ink-hover: #FFFFFF;
    --on-ink: #0A0D13;
    --icon-accent: var(--brand-500);
    --bevel: rgba(255,255,255,0.06);

    --secondary-500: #6F8FFF;
    --secondary-soft: rgba(111,143,255,0.16);
    --accent-500: #FF8A5C;
    --accent-soft: rgba(255,138,92,0.14);

    --success: #A3E36A;            /* lime, kept apart from the mint accent */
    --success-soft: rgba(163,227,106,0.13);
    --warning: #FFC46B;
    --warning-soft: rgba(255,196,107,0.13);
    --error: #FF7B7B;
    --error-soft: rgba(255,90,90,0.16);
    --on-error: #1A0505;
    --info: #8EAAFF;
    --info-soft: rgba(111,143,255,0.16);

    --ui-badge-ok-text:     var(--success);
    --ui-badge-attn-text:   var(--warning);
    --ui-badge-danger-text: var(--error);
    --ui-badge-brand-text:  var(--brand-ink);
    --ui-badge-info-text:   var(--info);

    --bg-1: #0A0D13;
    --bg-2: #080A10;
    --bg-3: #05070B;
    --surface: #10141C;
    --surface-soft: #181D28;
    --text-main: #E8EDF4;
    --text-muted: #98A2B4;
    --text-faint: #7D8799;         /* ≥ 4.5:1 on surface */
    --text: var(--text-main);
    --muted: var(--text-muted);
    --border: #222938;
    --border-strong: #313A4C;
    --rule: #E8EDF4;
    --shadow: inset 0 1px 0 rgba(255,255,255,0.035), 0 1px 2px rgba(0,0,0,0.35);
    --shadow-pop: 0 24px 48px -24px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.03);
    --backdrop: rgba(3,5,8,0.7);

    --glass-bg: var(--surface);
    --glass-border: var(--border);
    --glass-shadow: var(--shadow);
    --soft-bg: var(--surface-soft);
    --soft-border: var(--border);
    --hover-border: #3B4559;
    --hover-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 24px -16px rgba(0,0,0,0.7);
    --glow-1: rgba(52,229,176,0.07);
    --glow-2: rgba(111,143,255,0.07);
    --divider: #1B212D;
    --row-hover: rgba(255,255,255,0.03);
    --focus-ring: rgba(52,229,176,0.4);

    --nav-bg: rgba(10,13,19,0.82);
    --nav-border: #1B212D;
    --nav-link-hover-bg: rgba(255,255,255,0.05);
    --nav-active: var(--surface-soft);
}
.theme-coffre { background: var(--bg-1); color: var(--text); }