/*!
 * AimsCraft — Multi-purpose Ecommerce Frontend
 * File:      assets/css/tokens.css
 * Developer: Shahid Malla <https://shahidmalla.com>
 * Company:   AimsCraft — owner of this source code
 * Copyright: © ElySpace. All rights reserved.
 */
/* ==========================================================================
   AimsCraft — tokens.css
   The single source of truth for every design decision in the project.
   Nothing else in the codebase may hardcode a colour, radius, shadow,
   duration or z-index: always var(--token).

   ORDER OF THIS FILE
   1. Scale tokens        (spacing, radii, type, motion, layout, z, safe-area)
   2. Light palette       (default, on bare :root)
   3. Dark palette        ([data-theme="dark"] + prefers-color-scheme guard)
   4. Accent presets      ([data-accent="aimscraft|amber|violet|noir|rose|forest"])
   5. Breakpoint tweaks   (header height on small screens)

   HOW ACCENTS WORK
   Each preset declares raw values only:
     --brand-50 … --brand-900   full numeric ramp
     --brand-l / -l-h / --brand-soft-l / --brand-ink-l / --brand-rgb-l   (light)
     --brand-d / -d-h / --brand-soft-d / --brand-ink-d / --brand-rgb-d   (dark)
   The theme layer maps those onto the semantic tokens components use:
     --brand, --brand-hover, --brand-soft, --brand-ink, --brand-text,
     --brand-ring, --brand-rgb, --sh-brand
   --brand is the *surface* colour (fills, borders); --brand-text is the same
   hue darkened until it clears 4.5:1 as text on every light surface. Use
   --brand-text for any `color:`, --brand for backgrounds and borders.
   --brand-on-ink is the third case: brand text on a ground that is ALWAYS dark
   whatever the theme — home-fashion's scrims over artwork, for instance. It is
   the light amber in both themes.

   --brand-on-inv is the fourth, and the two are NOT interchangeable: it is for
   a ground that INVERTS with the theme (background: var(--ink), which is
   near-black in light mode and near-white in dark). It therefore flips the
   opposite way to everything else — light amber in light mode, dark olive in
   dark. .banner--dark is the consumer. Using --brand-on-ink there left its
   eyebrow at 1.32:1 on the panel's own background; using --brand-on-inv on
   home-fashion's scrims does the mirror-image damage. Pick by asking whether
   the ground flips. Was a dark
   panel inside a light page (.banner--dark, .hero--full). The darkened
   --brand-text lands at 2.9:1 there, so those contexts take the light amber.
   So `rgb(var(--brand-rgb) / .12)` is always a tint of the *active* brand in
   the *active* theme. Default accent = amber (declared on :root).
   ========================================================================== */

/* ==========================================================================
   1. SCALE TOKENS — theme agnostic
   ========================================================================== */
:root {
  /* --- Spacing (4px rhythm) ------------------------------------------- */
  --sp-0: 0px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-28: 112px;
  --sp-32: 128px;

  /* --- Radii ------------------------------------------------------------ */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-full: 999px;

  /* --- Typography -------------------------------------------------------
     Families are loaded in HTML (<link> to Google Fonts, preconnect +
     display=swap). Never @import a font from CSS.                        */
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* TYPE SCALE — fixed px:
       2xs 13 · xs 14 · sm 15 · base 16 · lg 18 · xl 20 · 2xl 24 · 3xl 30

     Previously every step was a fluid clamp() whose FLOOR fell below the step
     it was named for: --fs-2xs bottomed at 11px, which put 3,995 text runs
     across ~100 selectors under the 12px minimum on narrow viewports. Fixed
     values remove that whole class of defect and make the scale auditable.

     The small steps were raised in the Sep 2026 UI audit: at 12px the nav,
     breadcrumbs, ratings, struck prices, badges and tab-bar labels (the most
     common text runs below body size) read as faint on phones. Captions now
     meet the 14px micro-copy floor in follow-rule.txt; only --fs-2xs (badges,
     letter-spaced uppercase labels, tab-bar labels) sits one step under it.
     src/modules/theme/theme.css.ts emits the same floors at runtime.

     Only the DISPLAY steps above 3xl keep a clamp: the specification does not
     name them, and a fixed 64px headline overflows a 320px phone. */
  --fs-2xs: 13px;   /* the floor — badges and uppercase labels. Nothing may be smaller. */
  --fs-xs:  14px;   /* captions, meta, breadcrumbs */
  --fs-sm:  15px;   /* small copy */
  --fs-md:  16px;   /* spec: base — body copy */
  --fs-lg:  18px;   /* spec: lg */
  --fs-xl:  20px;   /* spec: xl */
  --fs-2xl: 24px;   /* spec: 2xl */
  --fs-3xl: 30px;   /* spec: 3xl */
  --fs-4xl: clamp(2rem, 1.60rem + 2.00vw, 2.75rem);   /* 32 → 44  display */
  --fs-5xl: clamp(2.5rem, 1.90rem + 3.00vw, 3.5rem);  /* 40 → 56  display */
  --fs-6xl: clamp(3rem, 2.20rem + 4.00vw, 4.5rem);    /* 48 → 72  display */
  --fs-base: var(--fs-md);   /* alias: body copy */

  /* ICON SCALE — fixed px, per the specification:
       sm 16 · md 20 (default) · lg 24 · xl 32, never below sm except in badges.

     These were em-based (.icon = 1.25em, --sm = 1em, --xs = .875em), so an icon
     inherited the size of whatever text it sat beside. That produced THIRTY
     distinct rendered icon sizes across the site and put 28 selectors under the
     16px floor — .icon--xs rendered at 9.7px and .icon--sm at 11.1px. Fixed px
     is the whole point of an icon scale. */
  /* CONTROL HEIGHTS. One ladder for every control, so a button, an input and a
     select placed in the same row are the same height. They were not: .btn--lg
     was 52px, .input--lg 54px and .search-input--lg 56px, which is why the 404
     page's search button sat 4px shorter than the field beside it.
     --control-md is the 44px touch-target floor. */
  --control-sm: 36px;
  --control-md: 44px;
  --control-lg: 52px;
  --control-xl: 60px;

  --icon-badge: 14px;  /* the ONLY size below --icon-sm; badges/tags only */
  --icon-sm: 16px;
  --icon-md: 20px;     /* default */
  --icon-lg: 24px;
  --icon-xl: 32px;

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-normal: 1.55;
  --lh-relaxed: 1.75;

  --ls-tighter: -0.035em;
  --ls-tight: -0.018em;
  --ls-normal: 0em;
  --ls-wide: 0.02em;
  --ls-wider: 0.09em;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* --- Layout ----------------------------------------------------------- */
  --container: 1280px;
  --container-wide: 1480px;
  --container-narrow: 820px;
  --container-pad: clamp(16px, 4vw, 32px);

  --header-h: 72px;
  --header-h-sm: 60px;
  --tabbar-h: 64px;

  /* --- Safe areas (iOS notch / home indicator) --------------------------- */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --tabbar-total: calc(var(--tabbar-h) + var(--safe-b));

  /* --- Motion ------------------------------------------------------------ */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out-back: cubic-bezier(.34, 1.4, .64, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-in: cubic-bezier(.55, 0, 1, .45);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 520ms;

  /* --- Layers ------------------------------------------------------------ */
  --z-below: -1;
  --z-base: 1;
  --z-sticky: 90;
  --z-tabbar: 95;
  --z-header: 100;
  --z-nav: 110;
  --z-drawer: 200;
  --z-modal: 300;
  --z-tooltip: 350;
  --z-toast: 400;

  /* --- Blur / glass ------------------------------------------------------ */
  --blur-1: 8px;
  --blur-2: 16px;
  --blur-3: 28px;

  /* --- Focus ------------------------------------------------------------- */
  --ring-w: 3px;
  --focus-ring: 0 0 0 var(--ring-w) var(--brand-ring);
  /* THE FOCUS INDICATOR COLOUR. Not --brand: the lime measures about 1.7:1 on
     the light paper, and WCAG 2.2 SC 1.4.11 wants 3:1 for a focus indicator.
     --ink is near-black in light and near-white in dark, so the ring is ~15:1
     against the page in both themes and legible on any control colour. */
  --focus-ink: var(--ink);
}

/* ==========================================================================
   2. LIGHT PALETTE — default
   ========================================================================== */
:root {
  color-scheme: light;

  /* Surfaces: warm near-white paper, pure white cards */
  --bg: #fbfaf8;
  --bg-soft: #f4f2ed;
  --surface: #ffffff;
  --surface-2: #faf8f4;
  --surface-3: #f1ede6;
  --overlay: rgb(28 22 16 / .46);
  /* Scrim behind text laid over artwork. Channels, not a colour, so a
     gradient can step the alpha; --overlay alone is far too light to hold
     4.5:1 over art that runs from near-white sky to mid-tan earth.

     --on-scrim is deliberately NOT theme-aware, like --avatar-ink: the scrim
     is dark in both themes, so text on it must stay light in both. Using
     --ink-inv here is the trap — it flips to near-black in dark mode and the
     label vanishes into the wash (measured at 1.94:1). */
  /* The brand's dark feature panel, and the ink that sits on it. Both are
     deliberately theme-INDEPENDENT, like --avatar-ink and --on-scrim: the panel
     is dark in light mode and dark in dark mode, so its text must stay light in
     both. Channels rather than a colour, so a rule can pick its own alpha the
     way --scrim-rgb does. */
  --panel-dark: #323232;
  --on-dark-rgb: 255 255 255;

  --scrim-rgb: 20 15 10;
  --on-scrim: #fbfaf8;

  /* Ink: warm near-black */
  --ink: #17130f;
  --ink-2: #4d453d;
  --ink-3: #6f665d;
  --ink-inv: #fbfaf8;

  /* Hairlines */
  --line: #e9e4db;
  --line-2: #d7cfc3;

  /* Secondary accent — deep jade, pairs with every preset */
  --accent-2: #0f766a;
  --accent-2-soft: #e2f4f0;
  --accent-2-ink: #0a544b;

  /* Status */
  --success: #0f7a4d;
  --success-soft: #e5f6ed;
  --success-ink: #0a5738;
  --warning: #b45309;
  --warning-soft: #fdf0dc;
  --warning-ink: #8a3f07;
  --danger: #c92a1f;
  --danger-soft: #fdeae7;
  --danger-ink: #9c1f17;
  --info: #1667c4;
  --info-soft: #e6f0fd;
  --info-ink: #10509d;
  --star: #f5a524;

  /* Decorative ink for the avatar plates. Those SVGs are fixed-colour art —
     warm and light in either theme — so their label must NOT follow --ink,
     which inverts. This is the one intentionally theme-independent colour. */
  --avatar-ink: #4a2410;

  /* Glass */
  --glass-bg: rgb(255 255 255 / .72);
  --glass-line: rgb(255 255 255 / .55);

  /* Shadows — warm-tinted, layered, low alpha */
  --shadow-rgb: 32 24 16;
  --sh-1: 0 1px 2px rgb(var(--shadow-rgb) / .05), 0 1px 1px rgb(var(--shadow-rgb) / .04);
  --sh-2: 0 2px 4px rgb(var(--shadow-rgb) / .05), 0 4px 12px -2px rgb(var(--shadow-rgb) / .07);
  --sh-3: 0 4px 8px rgb(var(--shadow-rgb) / .05), 0 12px 28px -6px rgb(var(--shadow-rgb) / .10);
  --sh-4: 0 8px 16px rgb(var(--shadow-rgb) / .06), 0 28px 56px -12px rgb(var(--shadow-rgb) / .16);
  --sh-inset: inset 0 1px 0 rgb(255 255 255 / .6);

  /* Gradients */
  --grad-brand: linear-gradient(135deg, var(--brand-400) 0%, var(--brand-600) 55%, var(--brand-700) 100%);
  --grad-warm: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
  --grad-fade: linear-gradient(180deg, rgb(255 255 255 / 0) 0%, var(--bg) 100%);

  /* ---- Accent mapping: light ------------------------------------------- */
  --brand: var(--brand-l);
  --brand-hover: var(--brand-l-h);
  --brand-soft: var(--brand-soft-l);
  --brand-ink: var(--brand-ink-l);
  --brand-text: var(--brand-700);
  --brand-on-ink: var(--brand-d);
  --brand-on-inv: var(--brand-d);

  /* The primary BUTTON colour, held apart from the accent identity.
     Most accents want them to be the same thing, so this falls back to
     --brand. The aimscraft preset does not: its identity is lime but its
     buttons are near-black, exactly as the brand's own site draws them. */
  --action: var(--action-l, var(--brand));
  --action-hover: var(--action-hover-l, var(--brand-hover));
  --action-ink: var(--action-ink-l, var(--brand-ink));
  --sh-action: var(--sh-action-l, var(--sh-brand));

  /* Design surfaces lifted from the brand's own pages. */
  --panel-lime: #eef5e2;
  --panel-sage: #e6e3c4;
  --panel-tan: #efcca8;
  --bar-ink: #313131;
  --slate: #5a5a5a;
  --deep-violet: #322d41;
  --brand-rgb: var(--brand-rgb-l);
  --brand-ring: rgb(var(--brand-rgb) / .38);
  --sh-brand: 0 6px 14px -6px rgb(var(--brand-rgb) / .40), 0 18px 40px -18px rgb(var(--brand-rgb) / .50);

  /* ---- Default accent: AMBER (raw values, mirrored in §4) --------------- */
  --brand-50: #fff8ee;
  --brand-100: #ffeccb;
  --brand-200: #fdd894;
  --brand-300: #f8b940;
  --brand-400: #f0a202;
  --brand-500: #e0561f;
  --brand-600: #cf4a17;
  --brand-700: #ab3a14;
  --brand-800: #8a2f14;
  --brand-900: #5f2211;
  --brand-l: #cf4a17;
  --brand-l-h: #ab3a14;
  --brand-soft-l: #fff2e0;
  --brand-ink-l: #ffffff;
  --brand-rgb-l: 207 74 23;
  --brand-d: #f0a202;
  --brand-d-h: #f8b940;
  --brand-soft-d: rgb(240 162 2 / .15);
  --brand-ink-d: #22150a;
  --brand-rgb-d: 240 162 2;
  /* ── PAGE PALETTES ─────────────────────────────────────────────────────
     Two home pages built from client references carry colours the house
     palette does not have. They live HERE and nowhere else, because a colour
     written into a page's own <style> is a colour the build cannot see, the
     dark theme cannot answer, and the next page cannot reuse.

     home-nest — pastel candy tiles and a navy ink (a dark navy, not black:
     swap it for pure black and the page becomes a stock theme) */
  --nest-pink: #ffeaed;
  --nest-lime: #f5ffb5;
  --nest-lavender: #ebe2fe;
  --nest-peach: #ffeee4;
  --nest-navy: #191a2e;
  --nest-navy-ink: #ffffff;
  --nest-band: #f6f6f6;
  --nest-tile: #f2f2f2;
  --nest-orange: #f8a53f;
  --nest-heart: #e6262a;
  /* on the pastels, the ink is always the page ink — they are light enough
     in both themes for that to hold */
  --nest-on-pastel: #191a2e;

  /* home-bento — floating white cards on a cool grey canvas, and a jet-black
     price tile that is the only strong colour on the page */
  --bento-canvas: #d2d6dd;
  --bento-card: #ffffff;
  --bento-panel: #f2f2f4;
  --bento-field: #f6f6f6;
  --bento-ink: #1a1a1a;
  --bento-ink-2: #6b6b70;
  --bento-black: #1f1f1f;    /* the loud tile; in the dark theme this pair inverts to a white tile */
  --bento-on-black: #ffffff;
  --bento-slab: #1f1f1f;     /* the footer; dark in both themes */
  --bento-on-slab: #ffffff;
  --bento-studio: #667069;   /* the reference's grey-green, taken down until white body text clears 4.5:1 on it */
  --bento-heart: #e63946;
  --bento-star: #f5a623;

  /* home-modest — cream paper and pure black ink, a peach ring and a tan
     accent (built from the ModestWear reference: the calm comes from the
     paper tint and the one warm ring; swap them for white/brand and it goes) */
  --modest-paper: #fbf8f1;
  --modest-ink: #000000;
  --modest-ink-2: #8a8a8a;
  --modest-line: #e6e6e6;
  --modest-peach: #dcbba8;
  --modest-tan: #c89564;
  --modest-ribbon: #000000;
  --modest-ribbon-2: #333333;
  --modest-on-ink: #ffffff;
  --modest-tile: #efe9dd;
  --modest-scrim: rgb(0 0 0 / .30);
  /* the hero slider's four grounds, each with the one deep ink its headline
     accent, button and sale tag take. --modest-on-deep on every deep clears
     10:1; every deep on its own ground clears 8:1. */
  --modest-sage: #e4e7da;
  --modest-sage-deep: #1f3b2d;
  --modest-mist: #e0e5e9;
  --modest-mist-deep: #22313f;
  --modest-blush: #f2e4dc;
  --modest-blush-deep: #6a2c22;
  --modest-sand: #ede4d4;
  --modest-sand-deep: #4a3221;
  --modest-on-deep: #ffffff;

  /* home-sneak — a white studio with soft grey tiles, one electric blue, a
     beige pedestal under floating product and a pink lace behind the wordmark
     (built from the Sneako reference) */
  --sneak-bg: #ffffff;
  --sneak-tile: #fafafa;
  --sneak-tile-2: #f0f0f0;
  --sneak-ink: #000000;
  --sneak-ink-2: #616161;
  --sneak-ink-3: #9c9c9c;
  --sneak-blue: #007bff;
  --sneak-beige: #e0caab;
  --sneak-sand: #f1e6d3;
  --sneak-brown: #9c733b;
  --sneak-lace: #f4a6b8;
  --sneak-cloud: #ffffff;
  --sneak-on-ink: #ffffff;
}

/* ==========================================================================
   3. DARK PALETTE — deep warm charcoal, never pure black
   The two blocks below are intentionally identical:
     a) explicit user choice  -> [data-theme="dark"]
     b) system preference     -> :root:not([data-theme="light"])
   ========================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0e0d0c;
  --bg-soft: #131110;
  --surface: #191614;
  --surface-2: #211d1a;
  --surface-3: #2a2521;
  --overlay: rgb(0 0 0 / .64);
  --scrim-rgb: 0 0 0;

  --ink: #f4f1ec;
  --ink-2: #bfb7ad;
  /* lifted from #9a9088: the muted token measured 4.15:1 on the LIGHTEST of
     the dark surfaces (compare.html cards, gift-cards radio hints), just
     under the 4.5 bar. #a49a91 clears it there and only improves the rest. */
  --ink-3: #a49a91;
  --ink-inv: #12100e;

  --line: #2b2622;
  --line-2: #3c352e;

  --accent-2: #35c8b2;
  --accent-2-soft: rgb(53 200 178 / .15);
  --accent-2-ink: #9fe8dc;

  --success: #34c98a;
  --success-soft: rgb(52 201 138 / .16);
  --success-ink: #a4ebc8;
  --warning: #f0b429;
  --warning-soft: rgb(240 180 41 / .16);
  --warning-ink: #f8d98f;
  --danger: #ff6f5e;
  --danger-soft: rgb(255 111 94 / .16);
  --danger-ink: #ffb5aa;
  --info: #5aa9f8;
  --info-soft: rgb(90 169 248 / .16);
  --info-ink: #b6d8fb;
  --star: #ffbf3d;

  --glass-bg: rgb(25 22 20 / .72);
  --glass-line: rgb(255 255 255 / .08);

  --shadow-rgb: 0 0 0;
  --sh-1: 0 1px 2px rgb(var(--shadow-rgb) / .40), 0 1px 1px rgb(var(--shadow-rgb) / .30);
  --sh-2: 0 2px 4px rgb(var(--shadow-rgb) / .40), 0 4px 12px -2px rgb(var(--shadow-rgb) / .45);
  --sh-3: 0 4px 8px rgb(var(--shadow-rgb) / .42), 0 12px 28px -6px rgb(var(--shadow-rgb) / .55);
  --sh-4: 0 8px 16px rgb(var(--shadow-rgb) / .45), 0 28px 56px -12px rgb(var(--shadow-rgb) / .65);
  --sh-inset: inset 0 1px 0 rgb(255 255 255 / .05);

  --grad-warm: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
  --grad-fade: linear-gradient(180deg, rgb(14 13 12 / 0) 0%, var(--bg) 100%);

  --brand: var(--brand-d);
  --brand-hover: var(--brand-d-h);
  --brand-soft: var(--brand-soft-d);
  --brand-ink: var(--brand-ink-d);
  --brand-text: var(--brand-d);
  --brand-on-ink: var(--brand-d);
  --brand-on-inv: var(--brand-700);

  --action: var(--action-d, var(--brand));
  --action-hover: var(--action-hover-d, var(--brand-hover));
  --action-ink: var(--action-ink-d, var(--brand-ink));
  --sh-action: var(--sh-action-d, var(--sh-brand));

  --panel-lime: #222a16;
  --panel-sage: #26261c;
  --panel-tan: #33251a;
  --bar-ink: #0b0b0b;
  --slate: #2a2a2a;
  --deep-violet: #1d1a26;
  --brand-rgb: var(--brand-rgb-d);
  --brand-ring: rgb(var(--brand-rgb) / .50);
  --sh-brand: 0 6px 14px -6px rgb(var(--brand-rgb) / .38), 0 18px 40px -18px rgb(var(--brand-rgb) / .55);
  /* page palettes, dark — the pastels dim to tints so cut-out artwork still
     reads; the navy and the jet-black stay themselves */
  --nest-pink: #3a2a2e;
  --nest-lime: #33351f;
  --nest-lavender: #2e2840;
  --nest-peach: #3a2e26;
  --nest-band: #171a1f;
  --nest-tile: #1f2329;
  --nest-on-pastel: #f4f1ec;
  --modest-paper: #17140f;
  --modest-ink: #f4f1ec;
  --modest-ink-2: #a39d94;
  --modest-line: #2b2823;
  --modest-peach: #8a6a58;
  --modest-tan: #d1a26f;
  --modest-ribbon: #f4f1ec;
  --modest-ribbon-2: #d9d3c9;
  --modest-on-ink: #17140f;
  --modest-tile: #24211b;
  --modest-scrim: rgb(0 0 0 / .45);
  --modest-sage: #1b2019;
  --modest-sage-deep: #c9dcc6;
  --modest-mist: #191e23;
  --modest-mist-deep: #c8d6e2;
  --modest-blush: #261c19;
  --modest-blush-deep: #f0c9bc;
  --modest-sand: #231e17;
  --modest-sand-deep: #e6d2b5;
  --modest-on-deep: #12100e;
  --sneak-bg: #0f1013;
  --sneak-tile: #17181c;
  --sneak-tile-2: #1f2126;
  --sneak-ink: #f4f4f5;
  --sneak-ink-2: #b0b2b8;
  --sneak-ink-3: #7c7f87;
  --sneak-blue: #4d9fff;
  --sneak-beige: #6b5a44;
  --sneak-sand: #2b2620;
  --sneak-brown: #d0a86f;
  --sneak-lace: #b85f77;
  --sneak-cloud: #1a1b20;
  --sneak-on-ink: #0f1013;
  --bento-canvas: #12151a;
  --bento-card: #1b1f26;
  --bento-panel: #232830;
  --bento-field: #262b33;
  --bento-ink: #f4f1ec;
  --bento-ink-2: #a9b0ba;
  --bento-studio: #4a4f55;
  --bento-black: #f4f1ec;
  --bento-on-black: #15181d;
  --bento-slab: #0c0e12;
  --bento-on-slab: #f4f1ec;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #0e0d0c;
    --bg-soft: #131110;
    --surface: #191614;
    --surface-2: #211d1a;
    --surface-3: #2a2521;
    --overlay: rgb(0 0 0 / .64);
    --scrim-rgb: 0 0 0;
  --scrim-rgb: 0 0 0;

    --ink: #f4f1ec;
    --ink-2: #bfb7ad;
    --ink-3: #a49a91;
    --ink-inv: #12100e;

    --line: #2b2622;
    --line-2: #3c352e;

    --accent-2: #35c8b2;
    --accent-2-soft: rgb(53 200 178 / .15);
    --accent-2-ink: #9fe8dc;

    --success: #34c98a;
    --success-soft: rgb(52 201 138 / .16);
    --success-ink: #a4ebc8;
    --warning: #f0b429;
    --warning-soft: rgb(240 180 41 / .16);
    --warning-ink: #f8d98f;
    --danger: #ff6f5e;
    --danger-soft: rgb(255 111 94 / .16);
    --danger-ink: #ffb5aa;
    --info: #5aa9f8;
    --info-soft: rgb(90 169 248 / .16);
    --info-ink: #b6d8fb;
    --star: #ffbf3d;

    --glass-bg: rgb(25 22 20 / .72);
    --glass-line: rgb(255 255 255 / .08);

    --shadow-rgb: 0 0 0;
    --sh-1: 0 1px 2px rgb(var(--shadow-rgb) / .40), 0 1px 1px rgb(var(--shadow-rgb) / .30);
    --sh-2: 0 2px 4px rgb(var(--shadow-rgb) / .40), 0 4px 12px -2px rgb(var(--shadow-rgb) / .45);
    --sh-3: 0 4px 8px rgb(var(--shadow-rgb) / .42), 0 12px 28px -6px rgb(var(--shadow-rgb) / .55);
    --sh-4: 0 8px 16px rgb(var(--shadow-rgb) / .45), 0 28px 56px -12px rgb(var(--shadow-rgb) / .65);
    --sh-inset: inset 0 1px 0 rgb(255 255 255 / .05);

    --grad-warm: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
    --grad-fade: linear-gradient(180deg, rgb(14 13 12 / 0) 0%, var(--bg) 100%);

    --brand: var(--brand-d);
    --brand-hover: var(--brand-d-h);
    --brand-soft: var(--brand-soft-d);
    --brand-ink: var(--brand-ink-d);
    --brand-text: var(--brand-d);
    --brand-on-ink: var(--brand-d);
    --brand-on-inv: var(--brand-700);

    --action: var(--action-d, var(--brand));
    --action-hover: var(--action-hover-d, var(--brand-hover));
    --action-ink: var(--action-ink-d, var(--brand-ink));
    --sh-action: var(--sh-action-d, var(--sh-brand));

    --panel-lime: #222a16;
    --panel-sage: #26261c;
    --panel-tan: #33251a;
    --bar-ink: #0b0b0b;
    --slate: #2a2a2a;
    --deep-violet: #1d1a26;
    --brand-rgb: var(--brand-rgb-d);
    --brand-ring: rgb(var(--brand-rgb) / .50);
    --sh-brand: 0 6px 14px -6px rgb(var(--brand-rgb) / .38), 0 18px 40px -18px rgb(var(--brand-rgb) / .55);
  /* page palettes, dark — the pastels dim to tints so cut-out artwork still
     reads; the navy and the jet-black stay themselves */
    --nest-pink: #3a2a2e;
    --nest-lime: #33351f;
    --nest-lavender: #2e2840;
    --nest-peach: #3a2e26;
    --nest-band: #171a1f;
    --nest-tile: #1f2329;
    --nest-on-pastel: #f4f1ec;
    --modest-paper: #17140f;
    --modest-ink: #f4f1ec;
    --modest-ink-2: #a39d94;
    --modest-line: #2b2823;
    --modest-peach: #8a6a58;
    --modest-tan: #d1a26f;
    --modest-ribbon: #f4f1ec;
    --modest-ribbon-2: #d9d3c9;
    --modest-on-ink: #17140f;
    --modest-tile: #24211b;
    --modest-scrim: rgb(0 0 0 / .45);
    --modest-sage: #1b2019;
    --modest-sage-deep: #c9dcc6;
    --modest-mist: #191e23;
    --modest-mist-deep: #c8d6e2;
    --modest-blush: #261c19;
    --modest-blush-deep: #f0c9bc;
    --modest-sand: #231e17;
    --modest-sand-deep: #e6d2b5;
    --modest-on-deep: #12100e;
    --sneak-bg: #0f1013;
    --sneak-tile: #17181c;
    --sneak-tile-2: #1f2126;
    --sneak-ink: #f4f4f5;
    --sneak-ink-2: #b0b2b8;
    --sneak-ink-3: #7c7f87;
    --sneak-blue: #4d9fff;
    --sneak-beige: #6b5a44;
    --sneak-sand: #2b2620;
    --sneak-brown: #d0a86f;
    --sneak-lace: #b85f77;
    --sneak-cloud: #1a1b20;
    --sneak-on-ink: #0f1013;
    --bento-canvas: #12151a;
    --bento-card: #1b1f26;
    --bento-panel: #232830;
    --bento-field: #262b33;
    --bento-ink: #f4f1ec;
    --bento-ink-2: #a9b0ba;
    --bento-studio: #4a4f55;
    --bento-black: #f4f1ec;
    --bento-on-black: #15181d;
    --bento-slab: #0c0e12;
    --bento-on-slab: #f4f1ec;
  }
}

/* ==========================================================================
   4. ACCENT PRESETS — raw ramps only, theme mapping is generic (§2 / §3)
   Usage: <html data-accent="violet"> — works in light and dark.
   ========================================================================== */

/* --- Saffron (default): amber threads → burnt crimson -------------------- */
:root[data-accent="amber"] {
  --brand-50: #fff8ee;
  --brand-100: #ffeccb;
  --brand-200: #fdd894;
  --brand-300: #f8b940;
  --brand-400: #f0a202;
  --brand-500: #e0561f;
  --brand-600: #cf4a17;
  --brand-700: #ab3a14;
  --brand-800: #8a2f14;
  --brand-900: #5f2211;
  --brand-l: #cf4a17;
  --brand-l-h: #ab3a14;
  --brand-soft-l: #fff2e0;
  --brand-ink-l: #ffffff;
  --brand-rgb-l: 207 74 23;
  --brand-d: #f0a202;
  --brand-d-h: #f8b940;
  --brand-soft-d: rgb(240 162 2 / .15);
  --brand-ink-d: #22150a;
  --brand-rgb-d: 240 162 2;
}

/* --- AimsCraft: the brand's own palette --------------------------------
   Sampled from aimscraft.com rather than invented: the lime CTA is
   #b8cc19, the soft panel behind the benefits carousel is #eef5e2, and the
   buttons the site actually uses everywhere else are near-black. So the ramp
   is the lime (it is the accent identity — underlines, badges, active states,
   the cart count, the back-to-top) while --action-* carries the near-black
   the buttons want. --brand-700 is #54600b because that is the first step
   dark enough to clear 4.5:1 as text on the tan panel (#efcca8), the
   lightest-but-warmest surface the design puts copy on.
   ------------------------------------------------------------------------ */
:root[data-accent="aimscraft"] {
  --brand-50: #f8fbef;
  --brand-100: #eef5e2;
  --brand-200: #dde9bb;
  --brand-300: #c7da76;
  --brand-400: #b8cc19;
  --brand-500: #a1b316;
  --brand-600: #7d8c11;
  --brand-700: #54600b;
  --brand-800: #414a09;
  --brand-900: #262c05;
  --brand-l: #b8cc19;
  --brand-l-h: #a1b316;
  --brand-soft-l: #eef5e2;
  --brand-ink-l: #1a1a1a;        /* dark on lime = 9.69:1 */
  --brand-rgb-l: 184 204 25;
  --brand-d: #cbdc7e;
  --brand-d-h: #dde9bb;
  --brand-soft-d: rgb(184 204 25 / .16);
  --brand-ink-d: #1c2004;
  --brand-rgb-d: 203 220 126;

  /* buttons are near-black on light, and the lime on dark */
  --action-l: #262626;
  --action-hover-l: #111111;
  --action-ink-l: #ffffff;       /* white on #262626 = 15.13:1 */
  --sh-action-l: var(--sh-2);
  --action-d: #cbdc7e;
  --action-hover-d: #dde9bb;
  --action-ink-d: #1c2004;
  --sh-action-d: var(--sh-2);
}

/* --- Violet: indigo-violet ---------------------------------------------- */
:root[data-accent="violet"] {
  --brand-50: #f3f1ff;
  --brand-100: #e7e2ff;
  --brand-200: #cec5ff;
  --brand-300: #ada0fd;
  --brand-400: #8b78fa;
  --brand-500: #5b3df5;
  --brand-600: #4a2ae0;
  --brand-700: #3c1fbb;
  --brand-800: #321b94;
  --brand-900: #221461;
  --brand-l: #4a2ae0;
  --brand-l-h: #3c1fbb;
  --brand-soft-l: #f0edff;
  --brand-ink-l: #ffffff;
  --brand-rgb-l: 74 42 224;
  --brand-d: #8b78fa;
  --brand-d-h: #ada0fd;
  --brand-soft-d: rgb(139 120 250 / .16);
  --brand-ink-d: #150b2e;
  --brand-rgb-d: 139 120 250;
}

/* --- Noir: near-black in light, near-white in dark ----------------------- */
:root[data-accent="noir"] {
  --brand-50: #f7f7f6;
  --brand-100: #eceae7;
  --brand-200: #d5d2cd;
  --brand-300: #b0aca6;
  --brand-400: #837e77;
  --brand-500: #4c4842;
  --brand-600: #201d1a;
  --brand-700: #171513;
  --brand-800: #100e0d;
  --brand-900: #080706;
  --brand-l: #201d1a;
  --brand-l-h: #080706;
  --brand-soft-l: #f2f0ed;
  --brand-ink-l: #ffffff;
  --brand-rgb-l: 32 29 26;
  --brand-d: #f4f1ec;
  --brand-d-h: #ffffff;
  --brand-soft-d: rgb(244 241 236 / .12);
  --brand-ink-d: #121110;
  --brand-rgb-d: 244 241 236;
}

/* --- Rose --------------------------------------------------------------- */
:root[data-accent="rose"] {
  --brand-50: #fff1f6;
  --brand-100: #ffe0ec;
  --brand-200: #ffc0da;
  --brand-300: #fb8fb9;
  --brand-400: #f4609b;
  --brand-500: #e5327c;
  --brand-600: #cb1c63;
  --brand-700: #a81450;
  --brand-800: #8a1443;
  --brand-900: #56102c;
  --brand-l: #cb1c63;
  --brand-l-h: #a81450;
  --brand-soft-l: #ffeef4;
  --brand-ink-l: #ffffff;
  --brand-rgb-l: 203 28 99;
  --brand-d: #f4609b;
  --brand-d-h: #fb8fb9;
  --brand-soft-d: rgb(244 96 155 / .16);
  --brand-ink-d: #2a0716;
  --brand-rgb-d: 244 96 155;
}

/* --- Forest ------------------------------------------------------------- */
:root[data-accent="forest"] {
  --brand-50: #eefaf2;
  --brand-100: #d6f2e0;
  --brand-200: #ade3c3;
  --brand-300: #77cba0;
  --brand-400: #40ad7c;
  --brand-500: #1f8e60;
  --brand-600: #14724c;
  --brand-700: #0f5c3e;
  --brand-800: #0d4933;
  --brand-900: #07291e;
  --brand-l: #14724c;
  --brand-l-h: #0f5c3e;
  --brand-soft-l: #e8f7ee;
  --brand-ink-l: #ffffff;
  --brand-rgb-l: 20 114 76;
  --brand-d: #40ad7c;
  --brand-d-h: #77cba0;
  --brand-soft-d: rgb(64 173 124 / .16);
  --brand-ink-d: #05190f;
  --brand-rgb-d: 64 173 124;
}

/* ==========================================================================
   5. BREAKPOINT TWEAKS
   ========================================================================== */
@media (max-width: 767.98px) {
  :root {
    --header-h: var(--header-h-sm);
  }
}