/* ==========================================================================
   Design tokens — the only place raw values live.
   Components use these variables only; change a token and the whole UI follows.

   🔥 EMBER (HotBotShop's look, DESIGN.md at the repo root): banked coals at night. Contrast-checked (WCAG 2.2 AA).
   Set by js/theme.js from Settings → Dashboard:
     [data-variation]    flame | gold | copper | coal | blue | jai   (the action and highlight colours; jai = vibrant pink)
     [data-theme]        light (Daylight) | dark (Ember)       (auto = follows the device)
     [data-density]      comfortable | compact

   Layers (top to bottom): brand → semantic surfaces → status → type roles → space → shape → elevation → motion →
   atmosphere (skies) → layout. A component reads a role token (--surface-raised, --type-metric, --elev-2), never a
   palette value, so a later polish pass only touches this file.
   ========================================================================== */

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url("../fonts/figtree-latin-wght-normal.woff2") format("woff2-variations"),
       url("../fonts/figtree-latin-wght-normal.woff2") format("woff2");   /* engines that don't know "-variations" */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url("../fonts/figtree-latin-ext-wght-normal.woff2") format("woff2-variations"),
       url("../fonts/figtree-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Variation (flame by default): dark values, then the Daylight ones */
  --v-accent: #ff6a1f;
  --v-on: #1a0a02;
  --v-hero: #ffb547;
  --v-day: #b9400b;
  --v-day-on: #ffffff;
  --v-glow: 255 106 31;
  --v-glow-deep: 194 65 12;

  /* Brand (Daylight values; [data-theme=dark] below switches to Ember) */
  --accent: var(--v-day);
  --on-accent: var(--v-day-on);
  --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) 55%, transparent);
  --gold: #8a5a00;          /* numbers that matter: deep amber in daylight (5.6:1 on the ground), gold in Ember */
  --gold-soft: color-mix(in oklab, var(--gold) 14%, var(--surface));
  --hero: var(--gold);      /* the one big number */

  /* Neutrals: Daylight (sunlight, glare: low saturation, high contrast) */
  --bg: #fbf7f2;
  --surface: #ffffff;
  --qr-paper: #ffffff; /* a QR stays dark on white in every theme (cameras need the contrast) */
  --surface-2: #f3ece6;
  --surface-hover: #f6f0ea;
  --surface-raised: var(--surface-2);   /* sheets, menus, chips: one lightness step above a card */
  --surface-sunken: #f4eee8;            /* wells and tracks: one step below a card */
  --border: #e7ded6;
  --border-strong: #8a7a70;   /* borders that carry meaning (inputs): 4.1:1 */
  --text: #1c1512;
  --text-muted: #5e514a;
  --text-subtle: #75675f;
  --overlay: rgb(28 21 18 / 0.45);
  --glow: none;
  --ring: var(--accent);                /* focus */
  --disabled-fg: #9a8e86;
  --disabled-bg: #efe8e2;

  /* Status (each AA on its soft background and on cards) */
  --success: #256a42;
  --warning: #8a4f00;
  --danger: #c2255c;
  --info: #2f5bd3;
  --neutral: #75675f;
  --on-danger: #ffffff;       /* text on the danger button, both themes */
  --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: Figtree everywhere (bundled, OFL); never thinner than 400 on dark */
  --font-sans: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, 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.1875rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-hero: clamp(2.25rem, 4.8vw, 2.6rem);   /* the one big number: large, not loud */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading-tight: 1.25;
  --leading: 1.5;
  /* Type roles (size / weight / tracking), used with `font:` shorthand or one by one */
  --type-display: var(--weight-semibold) clamp(1.625rem, 2.8vw, 1.75rem) / 1.12 var(--font);   /* the page title */
  --type-display-tracking: -0.02em;
  --type-title: var(--weight-semibold) var(--text-md) / var(--leading-tight) var(--font);   /* card titles */
  --type-metric: var(--weight-semibold) 1.5rem / 1.1 var(--font);                        /* numbers in tiles */
  --type-label: var(--weight-semibold) var(--text-xs) / 1.2 var(--font);                 /* the small metric label, sentence case */
  --type-label-tracking: 0.02em;
  --type-meta: var(--weight-medium) var(--text-sm) / var(--leading) var(--font);          /* hints, timestamps */

  /* 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(44px * var(--density));   /* pass 3: every control is a thumb target, desktop too */
  --tap: 44px;                          /* the smallest touch target (WCAG 2.5.8 is 24; Apple and the owner want 44) */

  /* Shape (pass 3): one system for every HotBotShop screen. Controls 12, blocks 16, cards 24, sheets 28 at the top, pills for chips */
  --radius-base: 12px;
  --radius-sm: 8px;
  --radius: var(--radius-base);          /* buttons, inputs, selects, small tiles */
  --radius-lg: 16px;                      /* blocks inside a card, tab tracks */
  --radius-card: 24px;                    /* cards, dialogs */
  --radius-sheet: 28px;                   /* the top corners of a bottom sheet */
  --radius-xl: var(--radius-card);
  --radius-2xl: var(--radius-card);
  --radius-pill: 999px;                   /* chips, badges, the phone tab bar */
  --border-width: 1px;

  /* Elevation (pass 3): depth comes from the four lightness steps and 1px hairlines; a card at rest has no shadow, only the
     inner top light that gives the rounded sections their roundness. Shadows (an offset and a soft blur, never a halo) are
     for things that float: dialogs, sheets, popovers, toasts, the floating bar. */
  --shadow-sm: 0 1px 2px rgb(60 40 30 / 0.06);
  --shadow: 0 2px 8px rgb(60 40 30 / 0.07), 0 1px 2px rgb(60 40 30 / 0.05);
  --shadow-lg: 0 12px 36px rgb(60 40 30 / 0.16), 0 2px 8px rgb(60 40 30 / 0.06);
  --shadow-float: 0 16px 40px -12px rgb(60 40 30 / 0.22), 0 2px 6px rgb(60 40 30 / 0.08);
  --inner-light: inset 0 1px 0 rgb(255 255 255 / 0.9);          /* the top edge catches the light */
  --inner-light-strong: inset 0 1px 0 rgb(255 255 255 / 0.35);  /* on the flame button */
  --elev-1: none;                       /* cards at rest */
  --elev-2: var(--shadow);              /* lifted cards, popovers */
  --elev-3: var(--shadow-float);        /* floating bars, sheets, dialogs */
  --card-edge: var(--inner-light);      /* the hairline light along a card's top edge */

  /* Motion: calm and quick, an exponential ease-out from an already-visible default (never ease-in, no bounce) */
  --dur-fast: 160ms;
  --dur: 200ms;
  --dur-slow: 320ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Atmosphere (js/widgets.js): the flame fill for icon tiles and progress, and the day's sky. Skies are pictures of
     the time of day, so they look the same in Ember and Daylight; text on them sits on a dark chip. */
  --flame: linear-gradient(135deg, rgb(var(--v-glow)), var(--v-hero));
  --on-flame: #1a0a02;
  --sky-dawn: linear-gradient(180deg, #4d5f93 0%, #c98a73 60%, #f2c58c 100%);
  --sky-morning: linear-gradient(180deg, #7fb3e6 0%, #f7c58a 100%);
  --sky-day: linear-gradient(180deg, #3f86d6 0%, #9cc8f0 100%);
  --sky-dusk: linear-gradient(180deg, #3b1d4a 0%, #b5432a 62%, #ffb547 100%);
  --sky-night: linear-gradient(180deg, #0b1230 0%, #23306b 70%, #5b4a8a 100%);
  --sky-chip: rgb(0 0 0 / 0.5);   /* white on it stays above 4.5:1 over the lightest sky */
  --on-sky: #ffffff;

  /* Layout */
  --sidebar-width: 240px;
  --topbar-height: 64px;
  --content-max: 1240px;
  --tabbar-h: 60px;
  /* Breakpoints (documented, not switchable in CSS): phone ≤ 720px, tablet ≤ 1024px, the sidebar folds at 860px */


  /* The front page's eye and phone (home.css reads tokens only) */
  --eye-violet: #8b7cf6; --eye-night: #0b0a10; --eye-night-2: #141118; --eye-cream: #fff6dc; --eye-amber: #a8762a;
  --eye-shadow: #1c1305; --eye-pupil: #050307; --phone-notch: #06050a;
  --home-c1: #030208;
  --home-c2: #000;

  color-scheme: light;
}

/* Variations: the action colour and the highlight, dark then Daylight (all ≥ 4.5:1 where they carry text) */
:root[data-variation="gold"] {
  --v-accent: #ffb547; --v-on: #1f1400; --v-hero: #ffd9a0; --v-day: #8a5a00; --v-day-on: #ffffff;
  --v-glow: 255 181 71; --v-glow-deep: 194 120 12;
}
:root[data-variation="copper"] {
  --v-accent: #e08a55; --v-on: #1a0a02; --v-hero: #f2c29b; --v-day: #9a4f20; --v-day-on: #ffffff;
  --v-glow: 224 138 85; --v-glow-deep: 150 72 30;
}
:root[data-variation="coal"] {
  --v-accent: #f0533a; --v-on: #1a0503; --v-hero: #ffb547; --v-day: #b3261e; --v-day-on: #ffffff;
  --v-glow: 240 83 58; --v-glow-deep: 150 30 20;
}
:root[data-variation="blue"] {
  --v-accent: #6e9bff; --v-on: #06122e; --v-hero: #c9daff; --v-day: #2f5bd3; --v-day-on: #ffffff;
  --v-glow: 110 155 255; --v-glow-deep: 40 70 170;
}
:root[data-variation="jai"] {   /* Jai: vibrant pink (owner, 2026-11-02) */
  --v-accent: #ff4fa3; --v-on: #2a0016; --v-hero: #ffc2e2; --v-day: #c2185b; --v-day-on: #ffffff;
  --v-glow: 255 79 163; --v-glow-deep: 176 24 104;
}

/* Ember (dark): banked coals at night. Explicit dark, or auto on a dark device */
:root[data-theme="dark"] {
  --accent: var(--v-accent);
  --on-accent: var(--v-on);
  --accent-hover: color-mix(in oklab, var(--accent) 86%, white);
  --gold: var(--v-hero);
  --hero: var(--gold);
  --bg: #141110;
  --surface: #221c19;
  --surface-2: #2a2320;
  --surface-hover: #2d2622;
  --surface-raised: #2a2320;
  --surface-sunken: #1a1513;
  --border: #3a302b;
  --border-strong: #7a685e;   /* 3.2:1 on cards */
  --text: #f4ede8;
  --text-muted: #a89b93;
  --text-subtle: #8f827a;
  --overlay: rgb(0 0 0 / 0.6);
  --glow: radial-gradient(closest-side, rgb(var(--v-glow) / 0.14), rgb(var(--v-glow-deep) / 0.06) 55%, transparent);
  --disabled-fg: #6f635c;
  --disabled-bg: #1e1917;
  --success: #7bc59a;
  --warning: #f2a94a;
  --danger: #ff5c7a;
  --info: #8fb0ff;
  --neutral: #a89b93;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow: 0 2px 10px rgb(0 0 0 / 0.35);
  --shadow-lg: 0 8px 32px rgb(0 0 0 / 0.45);
  --shadow-float: 0 16px 40px -12px rgb(0 0 0 / 0.6), 0 2px 6px rgb(0 0 0 / 0.35);
  --inner-light: inset 0 1px 0 rgb(255 255 255 / 0.06);
  --inner-light-strong: inset 0 1px 0 rgb(255 255 255 / 0.18);
  --card-edge: var(--inner-light);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --accent: var(--v-accent);
    --on-accent: var(--v-on);
    --accent-hover: color-mix(in oklab, var(--accent) 86%, white);
    --gold: var(--v-hero);
    --hero: var(--gold);
    --bg: #141110;
    --surface: #221c19;
    --surface-2: #2a2320;
    --surface-hover: #2d2622;
    --surface-raised: #2a2320;
    --surface-sunken: #1a1513;
    --border: #3a302b;
    --border-strong: #7a685e;
    --text: #f4ede8;
    --text-muted: #a89b93;
    --text-subtle: #8f827a;
    --overlay: rgb(0 0 0 / 0.6);
    --glow: radial-gradient(closest-side, rgb(var(--v-glow) / 0.14), rgb(var(--v-glow-deep) / 0.06) 55%, transparent);
    --disabled-fg: #6f635c;
    --disabled-bg: #1e1917;
    --success: #7bc59a;
    --warning: #f2a94a;
    --danger: #ff5c7a;
    --info: #8fb0ff;
    --neutral: #a89b93;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow: 0 2px 10px rgb(0 0 0 / 0.35);
    --shadow-lg: 0 8px 32px rgb(0 0 0 / 0.45);
    --shadow-float: 0 16px 40px -12px rgb(0 0 0 / 0.6), 0 2px 6px rgb(0 0 0 / 0.35);
    --inner-light: inset 0 1px 0 rgb(255 255 255 / 0.06);
    --inner-light-strong: inset 0 1px 0 rgb(255 255 255 / 0.18);
    --card-edge: var(--inner-light);
    color-scheme: dark;
  }
}

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

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