/* ===================================================================== */
/* Theme: surfvalve                                                   */
/* ===================================================================== */
/*
   ONE STORE'S VALUES. Nothing else belongs in this file.

   Only :root custom properties and @font-face. No selectors, no layout, no copy - which is
   why a theme file cannot break a page: it sets no property on any element, it only changes
   what var() resolves to.

   Loaded AFTER css/site.css (see index.html). That ordering is the whole mechanism: the later
   :root wins, so every var() call site in site.css retints at once without a single rule being
   touched.

   GENERATED from the :root block in css/site.css, which is the schema and the default. A theme
   need only carry the tokens it actually changes - anything it omits falls back to site.css.
*/
:root {
    --primary-color: var(--brand); /* legacy alias; points at the unified brand accent */

    /* --- Design tokens (dark theme) --- */
    /* Brand accent */
    --brand: #2dd4bf; /* primary actions */
    --brand-strong: #14b8a6; /* hover / pressed */
    --brand-ink: #06231f; /* text on brand fills */
    --brand-soft: rgba(45, 212, 191, 0.12); /* subtle brand tint */
    --brand-line: rgba(45, 212, 191, 0.45); /* brand borders */

    /* Semantic */
    --danger: #ef4444;
    --danger-strong: #dc2626;
    --success: #22c55e;

    /* Surfaces */
    --surface-1: #1c1a2b; /* panels / cards */
    --surface-2: #26243a; /* raised items inside panels */
    --surface-3: #2f2c46; /* hover / inputs on dark */

    /* Borders & lines */
    --border: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.16);

    /* Text */
    --text: #f4f4f5;
    --text-muted: #a9a7b8;
    --text-dim: #7c7a90;

    /* Shape & motion */
    --radius: 10px;
    --radius-sm: 8px;
    --shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
    --ease: 0.18s ease;

    /* --- Legacy palette ---------------------------------------------------
       Every colour literal that used to sit inline in the rules below, named by
       ROLE and holding its original value exactly. Nothing here changed what
       renders; it only moved the value somewhere a theme can reach it.
       Several roles share a value on purpose - collapsing them is a design
       decision, and keeping them apart is what makes that decision reviewable. */

    /* Surfaces */
    --page-bg: #333333; /* body */
    --panel-bg: #222222; /* legacy controls, nav, tables */
    --panel-bg-deep: #111111; /* body-content, table hover */
    --card-bg: #2b2b2b; /* account card, order sidebar, review form */
    --card-bg-admin: #262626; /* admin card, order main */
    --card-bg-inset: #1f1f1f; /* inputs sunk into a card */
    --row-alt-bg: #1a1a1a; /* zebra rows, timeline marker */
    --step-bg: #2a2a2a; /* timeline step */
    --modal-bg: darkslategrey; /* cart modal - the only surface that uses it */
    --navbar-bg: #212529; /* the top bar; Bootstrap bg-dark exactly, so the default is unchanged */

    /* Lines */
    --line-strong: #3a3a3a;
    --line-mid: #444444;
    --line-soft: #555555;
    --line-grey: #808080;
    --line-pale: #999999;
    --line-faint: #dddddd;
    --line-bs: #dee2e6; /* inherited from Bootstrap's grey ramp */
    --line-bs-soft: #e9ecef;
    --line-bs-input: #ced4da;

    /* Text */
    --ink-invert: #ffffff;
    --ink-bright: #f1f1f1;
    --ink-page: whitesmoke;
    --ink-soft: #e6e6e6;
    --ink-dim: #cccccc;
    --ink-grey: #888888;
    --ink-grey-cool: #8b9199;
    --ink-dark: #000000; /* only legible on the light legacy panes */
    --ink-rule: #222;
    --ink-muted-bs: #adb5bd;
    --ink-muted-bs-deep: #6c757d;
    --ink-slate: #55595e;
    --ink-darkest: #212529;

    /* Accents that are NOT the brand. The blues are what make a page title read
       blue on a teal site - retint them, do not assume they follow --brand. */
    --accent-blue: #3d6bb0;
    --accent-blue-deep: #2c4973;
    --accent-bs-primary: #0d6efd;
    --accent-bs-link: #428bca;
    --focus-ring: #258cfb;

    /* Semantic, legacy spellings */
    --success-legacy: #4caf50;
    --success-bs: #198754;
    --success-ink: #0f5132;
    --success-bg: #d1e7dd;
    --danger-bs: #dc3545;
    --danger-soft: #fca5a5;
    --danger-ink: #842029;
    --danger-bg: #f8d7da;
    --warning-gold: #d0a24c;
    --warning-star: #f5b301;
    --warning-bg: #fff3cd;

    /* The cream admin detail panes, and the notes lane */
    --pane-bg: #eee7ab;
    --pane-line: #9e9449;
    --pane-link: #0a25a5;
    --note-accent: orange;

    /* --- Type -------------------------------------------------------------
       --font-body defaults to Bootstrap's own stack, which is what body has
       always resolved to; naming it is what lets a theme change it at all.
       ⚠ --font-display names a font NOTHING LOADS - there is no @font-face and
       no <link> for futura-pt-bold, so every h2 has always fallen back to the
       generic sans. A theme that wants it must ship the face itself. */
    --font-body: var(--bs-body-font-family, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
    --font-display: "futura-pt-bold", sans-serif;
    --font-accent: 'Times New Roman', Times, serif;
    --accent-goldenrod: goldenrod;

    /* Attention banners on an order (operator-facing) */
    --banner-info-bg: #1c2f3a;
    --banner-info-line: #2a4a5c;
    --banner-info-rule: #3da8e5;
    --banner-info-head: #78c9ff;
    --banner-success-bg: #1c3a24;
    --banner-success-line: #2a5c37;
    --banner-success-rule: #3dc46a;
    --banner-success-ink: #8ee0a6;
    --banner-danger-bg: #3a1c1f;
    --banner-danger-line: #5c2a2f;
    --banner-danger-rule: #e5484d;
    --banner-danger-head: #ff8a8f;
    --banner-warning-bg: #3a2f1c;
    --banner-warning-line: #5c4a2a;
    --banner-warning-rule: #e5a03d;
    --banner-warning-head: #ffc978;

    /* Status badges. The bg/ink pairs a badge needs that are not already
       covered by --success-* / --danger-* above. */
    --status-processing-bg: #e7f3ff;
    --status-processing-ink: #0c63e4;
    --status-completed-ink: #16351d;
    --status-refunded-bg: #e2e3e5;
    --status-refunded-ink: #41464b;
    --status-failed-ink: #500920;
    --status-pending-ink: #856404;
    --status-shipped-bg: #e3f2fd;

    /* Return-window eligibility, and a cancelled timeline */
    --eligible-bg: #14261a;
    --eligible-ink: #a3d9b8;
    --ineligible-bg: #2a2410;
    --ineligible-line: #6b5a1e;
    --ineligible-ink: #e6d59a;
    --canceled-bg: #2a1416;
    --canceled-ink: #f1b0b7;

    /* Legacy admin console */
    --row-read-bg: #1e1e1e;
    --row-even-bg: #202020;
    --ink-faint: #666666;
    --ink-faint-warm: #777777;
    --ink-review: #d5d5d5;
    --input-shadow: #c0c0c0;

    /* One-offs worth naming: --brand-light is a LIGHTER TINT OF THE BRAND on the shipment
       link, so a rebrand that only moves --brand would leave it behind. */
    --brand-light: #4dd0c4; /* lighter brand tint (shipment link) */
    --on-success-ink: #06210f;
    --menu-hover-ink: #0a79c2;
    --stock-low-ink: #fbbf24;
    --pending-check-ink: #eab308;
    --error-ink: #ff6b6b;
    --review-error-ink: #e08585;
    --scan-return-bg: #d9822b;
    --danger-raw: red; /* Stripe Elements invalid state */
}