/* The customer web shop's own design tokens: each member shop keeps ITS look here (accent, background, light/dark from
   Settings → Mobile shop). HotBotShop's Ember look (../../admin/css/tokens.css, DESIGN.md) is never applied to customer
   screens (owner rule: member shops keep their own brand). Split out of the dashboard's tokens when Ember landed (2026-10-28). */


:root {
  /* Brand */
  --accent: #c2410c;
  --accent-hover: color-mix(in oklab, var(--accent) 86%, black);
  --accent-soft: color-mix(in oklab, var(--accent) 12%, var(--surface));
  --accent-ring: color-mix(in oklab, var(--accent) 40%, transparent);
  --on-accent: #fff; /* set by theme.js for contrast */

  /* Neutrals (light) */
  --bg: #f6f6f4;
  --surface: #ffffff;
  --qr-paper: #ffffff; /* a QR stays dark on white in every theme (cameras need the contrast) */
  --surface-2: #f1f1ee;
  --surface-hover: #f4f4f1;
  --border: #e4e4df;
  --border-strong: #cfcfc8;
  --text: #1c1c1a;
  --text-muted: #62625c;
  --text-subtle: #8c8c85;
  --overlay: rgb(20 20 18 / 0.42);

  /* Semantic */
  --success: #2f9e44;
  --warning: #d9822b;
  --danger: #d6336c;
  --info: #1c7ed6;
  --neutral: #868e96;
  --success-soft: color-mix(in oklab, var(--success) 13%, var(--surface));
  --warning-soft: color-mix(in oklab, var(--warning) 15%, var(--surface));
  --danger-soft: color-mix(in oklab, var(--danger) 12%, var(--surface));
  --info-soft: color-mix(in oklab, var(--info) 12%, var(--surface));
  --neutral-soft: color-mix(in oklab, var(--neutral) 14%, var(--surface));

  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --font: var(--font-sans);
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --leading-tight: 1.25;
  --leading: 1.5;

  /* Spacing — 4px grid, scaled by density */
  --density: 1;
  --space-1: calc(4px * var(--density));
  --space-2: calc(8px * var(--density));
  --space-3: calc(12px * var(--density));
  --space-4: calc(16px * var(--density));
  --space-5: calc(20px * var(--density));
  --space-6: calc(24px * var(--density));
  --space-8: calc(32px * var(--density));
  --control-height: calc(36px * var(--density));

  /* Shape */
  --radius-base: 10px;
  --radius-sm: calc(var(--radius-base) * 0.6);
  --radius: var(--radius-base);
  --radius-lg: 16px;
  --radius-pill: 999px;
  --border-width: 1px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
  --shadow: 0 2px 8px rgb(0 0 0 / 0.06), 0 1px 2px rgb(0 0 0 / 0.04);
  --shadow-lg: 0 12px 40px rgb(0 0 0 / 0.14), 0 2px 8px rgb(0 0 0 / 0.06);

  /* Motion */
  --dur-fast: 120ms;
  --dur: 200ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* Layout */
  --sidebar-width: 232px;
  --topbar-height: 56px;
  --content-max: 1240px;

  color-scheme: light;
}

/* Dark neutrals: explicit dark, or auto on a dark device */
:root[data-theme="dark"] {
  --bg: #121211;
  --surface: #1b1b19;
  --surface-2: #232321;
  --surface-hover: #252523;
  --border: #2f2f2c;
  --border-strong: #42423e;
  --text: #ecece8;
  --text-muted: #a5a59e;
  --text-subtle: #7b7b75;
  --overlay: rgb(0 0 0 / 0.6);
  --accent-hover: color-mix(in oklab, var(--accent) 84%, white);
  --success: #51cf66;
  --warning: #f2a94a;
  --danger: #f06595;
  --info: #4dabf7;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow: 0 2px 10px rgb(0 0 0 / 0.35);
  --shadow-lg: 0 16px 48px rgb(0 0 0 / 0.55);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg: #121211;
    --surface: #1b1b19;
    --surface-2: #232321;
    --surface-hover: #252523;
    --border: #2f2f2c;
    --border-strong: #42423e;
    --text: #ecece8;
    --text-muted: #a5a59e;
    --text-subtle: #7b7b75;
    --overlay: rgb(0 0 0 / 0.6);
    --accent-hover: color-mix(in oklab, var(--accent) 84%, white);
    --success: #51cf66;
    --warning: #f2a94a;
    --danger: #f06595;
    --info: #4dabf7;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow: 0 2px 10px rgb(0 0 0 / 0.35);
    --shadow-lg: 0 16px 48px rgb(0 0 0 / 0.55);
    color-scheme: dark;
  }
}

/* Density */
:root[data-density="compact"] { --density: 0.8; --text-base: 0.8125rem; }

/* Corner style */
:root[data-radius="sharp"] { --radius-base: 2px; }
:root[data-radius="soft"] { --radius-base: 8px; }
:root[data-radius="round"] { --radius-base: 14px; }

/* Fonts (system stacks only: no external font downloads) */
/* Fonts already on people's devices (nothing is downloaded) */
:root[data-font="modern"] { --font: "Inter", "Segoe UI Variable Text", "SF Pro Text", "SF Pro", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; }
:root[data-font="rounded"] { --font: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", "Quicksand", "Arial Rounded MT Bold", system-ui, sans-serif; }
:root[data-font="geometric"] { --font: "Avenir Next", "Avenir", "Montserrat", "Century Gothic", "Futura", "Segoe UI", system-ui, sans-serif; }
:root[data-font="humanist"] { --font: "Seravek", "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif; }
:root[data-font="serif"] { --font: "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, Georgia, serif; }
:root[data-font="mono"] { --font: var(--font-mono); }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; }
}

/* ==========================================================================
   Colours the looks and the overlays are built from (pass 3: moved here from shop.css, values unchanged; the rules in
   shop.css hold no colour of their own). Washes are white at an opacity: the glass fills and edge lights of the
   dark looks. The luxe and future blocks below are the looks' own tokens.
   ========================================================================== */
:root {
  --white: #fff;
  --wash-02: rgb(255 255 255 / .02); --wash-03: rgb(255 255 255 / .03); --wash-04: rgb(255 255 255 / .04);
  --wash-05: rgb(255 255 255 / .05); --wash-06: rgb(255 255 255 / .06); --wash-07: rgb(255 255 255 / .07);
  --wash-08: rgb(255 255 255 / .08); --wash-12: rgb(255 255 255 / .12); --wash-18: rgb(255 255 255 / .18);
  --wash-25: rgb(255 255 255 / .25); --wash-30: rgb(255 255 255 / .3); --wash-45: rgb(255 255 255 / .45);
  --wash-55: rgb(255 255 255 / .55);
  --shade-35: rgb(0 0 0 / .35);
  /* ratings, badges, the live dot */
  --star: #f5b301;
  --limited: #d6336c;
  --limited-line-dark: #ff6b6b;   /* "Limited stock" on a dark look: outline and text */
  --limited-text-dark: #ffb4b4;
  --live: #22c55e;
  --live-pulse: rgba(34, 197, 94, .6);
  --live-pulse-0: rgba(34, 197, 94, 0);
  /* text on the accent where a bubble or a badge sets its own (the old shop never defined --accent-contrast) */
  --on-accent-bubble: #fff;
  --on-accent-badge: #111;
  /* photos, the lightbox, sheets */
  --on-photo: #fff;
  --photo-letterbox: #000;
  --photo-chip: rgba(0, 0, 0, .55);
  --photo-chip-nav: rgba(0, 0, 0, .5);
  --photo-dot: rgba(255, 255, 255, .55);
  --photo-dot-edge: rgba(0, 0, 0, .25);
  --lightbox-bg: rgba(0, 0, 0, .88);
  --lightbox-btn: rgba(255, 255, 255, .15);
  --scrim-sheet: rgba(0, 0, 0, .55);
  --shadow-sheet: 0 -10px 40px rgba(0, 0, 0, .4);
  --shadow-fab: 0 6px 20px rgb(0 0 0 / .25);
  --shadow-chat: 0 12px 40px rgb(0 0 0 / .3);
  --glass-bar-shadow: 0 20px 40px -18px #000;   /* the floating tab bar of the luxe and future looks */
  /* the welcome tour */
  --leaf-fallback: linear-gradient(135deg, #f6e7b0 0%, var(--accent) 45%, #8a6a1c 100%);
  --portal-glint: #fff8df;
  --portal-ink: #07060d;
}

/* ✨ LUXE: night sky, smoked glass with a fine gold edge, gold leaf accents */
:root[data-look="luxe"] {
  --lux-ink: #07060d;
  --lux-gold: var(--accent, #d4af37);
  --lux-gold-hi: color-mix(in oklab, var(--lux-gold) 55%, #fff6d8);
  --lux-gold-lo: color-mix(in oklab, var(--lux-gold) 70%, #3b2a06);
  --lux-leaf: linear-gradient(135deg, var(--lux-gold-hi) 0%, var(--lux-gold) 42%, var(--lux-gold-lo) 100%);
  --lux-edge: linear-gradient(140deg, color-mix(in oklab, var(--lux-gold-hi) 70%, transparent), var(--wash-06) 38%,
    var(--wash-02) 62%, color-mix(in oklab, var(--lux-gold) 45%, transparent));
  --lux-glass: rgb(17 15 28 / .58);
  --lux-glass-hi: rgb(30 26 46 / .66);
  --lux-cream: #f4ecd8;
  --lux-mute: #b3ab98;
  --lux-serif: "Cormorant Garamond", "Playfair Display", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --bg: var(--lux-ink);
  --surface: var(--lux-glass);
  --surface-2: var(--wash-05);
  --text: var(--lux-cream);
  --text-muted: var(--lux-mute);
  --text-subtle: #857e70;
  --border: rgb(212 175 55 / .16);
  --accent-soft: color-mix(in oklab, var(--lux-gold) 16%, transparent);
  --accent-ring: color-mix(in oklab, var(--lux-gold) 40%, transparent);
  --on-accent: #1a1405;
  --lux-sky-a: #1a1230;
  --lux-sky-b: #0c1a2b;
  --lux-nebula: rgb(124 58 237 / .10);
  --lux-card-shadow: 0 18px 40px -24px rgb(0 0 0 / .8), inset 0 1px 0 var(--wash-04);
  --lux-header-bg: linear-gradient(to bottom, rgb(7 6 13 / .86), rgb(7 6 13 / .55));
  --lux-line-14: rgb(212 175 55 / .14);
  --lux-line-20: rgb(212 175 55 / .2);
  --lux-line-22: rgb(212 175 55 / .22);
  --lux-line-28: rgb(212 175 55 / .28);
  --lux-line-35: rgb(212 175 55 / .35);
  --lux-mark-shadow: 0 0 0 1px var(--wash-12), 0 0 22px color-mix(in oklab, var(--lux-gold) 35%, transparent);
  --lux-btn-shadow: 0 8px 24px -10px color-mix(in oklab, var(--lux-gold) 70%, transparent), inset 0 1px 0 var(--wash-45);
  --lux-tabbar-fill: rgb(14 12 24 / .78);
  --lux-tab-ink: #8a8373;
  --lux-avatar-ring: 0 0 0 3px rgb(7 6 13), 0 0 0 4px color-mix(in oklab, var(--lux-gold) 60%, transparent), 0 0 28px color-mix(in oklab, var(--lux-gold) 30%, transparent);
  --lux-sheet: #110f1c;
}

/* 🛸 FUTURE: deep navy, soft glass, the shop's accent as a calm light */
:root[data-look="future"] {
  --neo-ink: #050a18;
  --neo-a: var(--accent, #22d3ee);
  --neo-b: #7c6cf6;
  --neo-b: oklch(from var(--neo-a) 0.72 0.17 calc(h + 80));   /* a second hue further round the wheel */
  --neo-grad: linear-gradient(118deg, var(--neo-a), var(--neo-b));
  --neo-glow: color-mix(in oklab, var(--neo-a) 45%, transparent);
  --neo-glass: rgb(10 15 30 / .7);
  --neo-edge: linear-gradient(135deg, color-mix(in oklab, var(--neo-a) 45%, transparent), var(--wash-07) 45%,
    var(--wash-04) 60%, color-mix(in oklab, var(--neo-b) 35%, transparent));
  --neo-text: #eaf0ff; --neo-mute: #9aa9c8; --neo-subtle: #65749a;
  --bg: var(--neo-ink); --surface: var(--neo-glass); --surface-2: var(--wash-05);
  --text: var(--neo-text); --text-muted: var(--neo-mute); --text-subtle: var(--neo-subtle);
  --border: color-mix(in oklab, var(--neo-a) 18%, transparent); --border-strong: color-mix(in oklab, var(--neo-a) 30%, transparent);
  --accent-soft: color-mix(in oklab, var(--neo-a) 12%, transparent); --accent-ring: color-mix(in oklab, var(--neo-a) 40%, transparent);
  --on-accent: #06121f; --radius: 14px; --radius-lg: 20px; --success: #4ade80;
  --neo-card-shadow: 0 20px 44px -26px #000, inset 0 1px 0 var(--wash-05);
  --neo-sheet: #0a0f1f;
  --neo-header-bg: linear-gradient(to bottom, rgb(5 10 24 / .92), rgb(5 10 24 / .6));
  --neo-mark-shadow: 0 0 0 1px var(--wash-12), 0 0 18px var(--neo-glow);
  --neo-btn-shadow: 0 10px 26px -12px var(--neo-glow), inset 0 1px 0 var(--wash-30);
  --neo-tabbar-fill: rgb(8 12 26 / .82);
}