/* ============================================================
   AXIOM — Design Tokens :root (SINGLE SOURCE OF TRUTH)
   The one place colours, type families, motion easings, spacing and
   the container/image tokens are defined. Loaded by BOTH worlds:
   - the Blade storefront (layouts/web) → skinned via the --ax-* aliases
   - the redesign pages (layouts/redesign) → read the canonical names
   so the entire site shares one palette / type / motion source.
   Contains ONLY custom properties — no element/reset/layout rules —
   so it is safe to load anywhere and never leaks layout.
   ============================================================ */
:root {
    /* — Canonical redesign palette — */
    --bg: #050506;            /* true black — diamonds shine against it */
    --bg-2: #0b0b0d;
    --bg-3: #131316;
    --surface: #16161a;
    --text: #f5f6f8;          /* diamond white */
    --text-2: #cdd0d5;
    --muted: #898d93;
    --muted-d: #5f636a;
    --line: rgba(245, 246, 248, 0.12);
    --line-2: rgba(245, 246, 248, 0.05);
    --accent: #dfe5ec;        /* bright diamond / platinum */
    --accent-2: #ffffff;
    --accent-strong: #ffffff;
    --accent-ink: #060607;
    --silver: #c7ccd2;
    --glow: 196, 208, 226; /* platinum-blue glow (RGB triplet for rgba(var(--glow), a)) */
    --paper: #ecedef;
    --paper-2: #dfe1e4;
    --paper-ink: #0b0b0d;

    /* — Type families — match the live redesign (axiom.dappasol.com), self-hosted (see axiom-fonts.css) — */
    --serif:   "Marcellus", "Times New Roman", serif;
    --display: "Marcellus", "Times New Roman", serif;
    --sans:    "Hanken Grotesk", system-ui, sans-serif;
    --mono:    "Space Grotesk", monospace;

    /* — Layout metrics (redesign pages) — */
    --gut: clamp(18px, 4.5vw, 84px);
    --maxw: 1380px;
    --nav-h: 80px;
    --fluid-display: clamp(2.6rem, 8vw, 7rem);
    --fluid-hero: clamp(3.2rem, 12vw, 10rem);
    /* Inner-page banner titles (about / collections / categories / detail heros) —
       a notch smaller than the full-screen home hero so the banner doesn't eat the
       whole viewport. */
    --fluid-banner: clamp(2.2rem, 5.4vw, 4.6rem);
    --lede-size: clamp(1.1rem, 1.5vw, 1.4rem);

    /* — Motion easings — */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

    /* — Legacy --ax-* names ALIAS the canonical tokens so the Blade shop skin
       (axiom-tokens.css) inherits the redesign palette from one place. — */
    --ax-bg:            var(--bg);
    --ax-bg-elev:       var(--surface);
    --ax-surface:       var(--surface);
    --ax-text:          var(--text);
    --ax-text-muted:    var(--muted);
    --ax-line:          var(--line);
    --ax-accent:        var(--accent);
    --ax-accent-strong: var(--accent-strong);
    --ax-accent-ink:    var(--accent-ink);

    /* — Spacing scale (C24) — 8pt system — */
    --ax-space-1: 4px;
    --ax-space-2: 8px;
    --ax-space-3: 16px;
    --ax-space-4: 24px;
    --ax-space-5: 32px;
    --ax-space-6: 48px;
    --ax-space-7: 64px;
    --ax-space-8: 96px;

    /* — Storefront container — kept at the theme width so Bucket B layout never moves — */
    --ax-container: var(--container-width, 1230px);
    --ax-gutter:    var(--ax-space-4);

    /* — Product image frame (C4) — */
    --ax-img-ratio:  1 / 1;
    --ax-img-bg:     #101010;
    --ax-img-radius: 14px;
    --ax-img-border: 1px solid rgba(255, 255, 255, .05);
}