/* ==========================================================================
   Unbanded — design tokens  ("The Members' Room", tokens.json v1.0.1)
   Every colour, size, face and duration in the app comes from here.
   Dark is the default; light is warm paper, not an inversion; extra-dim is
   the lounge palette for the Smoke tab.  Never invent a hex in component CSS.
   ========================================================================== */

/* BRASS ALLOWLIST — brass (--accent) means the one primary action or live state.
   Allowed: .btn-primary / .btn-ignite / .fab (one per screen); the running .ring progress and
   ember dot; the active-smoke card (1px accent at 60% + accentSoft wash); the Smoke tab ring
   while a timer runs; the active tab inlay; .chip-on stroke + accentStrong label; the multi-select
   check; .seg active thumb; .switch on; .slider fill/knob; filled .rating leaves; focus ring;
   link text (accentStrong); chart series 1 and the sequential ramp.
   Never: .phase-tag, .badge, .pill, .toast, capacity bars, .stat, card rails, .section-title,
   icons at rest, low-stock / drift / overrun states, confirm sheets, banners, likes/toasts. */

/* --------------------------------------------------------------------------
   1. Dark (default) — also re-applied on body[data-theme="dark"] so an explicit
      app choice beats the OS colour-scheme preference.
   -------------------------------------------------------------------------- */
:root,
body[data-theme="dark"] {
  color-scheme: dark;

  /* room → panel → card → raised */
  --bg0: #15100C;
  --bg1: #1C1511;
  --surface: #241B15;
  --surface-raised: #2E241C;
  --border: #3B2F24;
  --border-strong: #8A765D;
  --highlight-warm: rgba(255, 225, 180, 0.06);
  --scrim: rgba(21, 16, 12, 0.72);
  --swatch-keyline: rgba(243, 232, 216, 0.32);
  --photo-vignette: linear-gradient(180deg, rgba(21, 16, 12, 0) 60%, rgba(21, 16, 12, 0.55) 100%);

  /* text */
  --text: #F3E8D8;
  --text-2: #C9B59C;
  --text-muted: #A48F77;

  /* brass */
  --accent: #C9A05A;
  --accent-strong: #E0B86B;
  --accent-soft: rgba(201, 160, 90, 0.14);
  --accent-60: rgba(201, 160, 90, 0.60);
  --accent-text: #1A1208;
  --secondary: #7A2E2A;

  /* semantic (never the accent) */
  --success: #8FA868;
  --warning: #ECCD63;
  --danger: #E0776B;
  --info: #8BAEC4;
  --success-soft: rgba(143, 168, 104, 0.12);
  --warning-soft: rgba(236, 205, 99, 0.12);
  --danger-soft: rgba(224, 119, 107, 0.12);
  --info-soft: rgba(139, 174, 196, 0.12);

  /* charts (series 1 is always your own data) */
  --chart-1: #B2893E;
  --chart-2: #4F98CB;
  --chart-3: #B4566E;
  --chart-4: #2AA59A;
  --chart-5: #B664C7;
  --chart-6: #C37E52;
  --chart-seq-1: #4A3A22;
  --chart-seq-2: #634B2A;
  --chart-seq-3: #7D6038;
  --chart-seq-4: #B18C4E;
  --chart-seq-5: #D4A95E;
  --chart-grid: var(--border);
  --chart-band: var(--success-soft);

  /* elevation */
  --edge-raised: inset 0 1px 0 var(--highlight-warm);
  --edge-brass: inset 0 1px 0 rgba(255, 245, 220, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.25);
  --edge-brass-pressed: inset 0 1px 0 rgba(255, 245, 220, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.25);
  --edge-brass-hot: inset 0 1px 0 rgba(255, 245, 220, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.25); /* ignite pressed: the highlight warms */
  --shadow-card: 0 0 0 0 transparent;   /* no card shadow in dark; a no-op so it can sit in a shadow list */
  --shadow-sheet: 0 -8px 24px -12px rgba(0, 0, 0, 0.6);
  --shadow-float: 0 8px 24px -8px rgba(0, 0, 0, 0.55);
  --ignite-gradient: linear-gradient(180deg, var(--accent-strong), var(--accent));
}

/* --------------------------------------------------------------------------
   2. Constants that do not change with theme
   -------------------------------------------------------------------------- */
:root {
  /* cream on oxblood / cream over a photo vignette, in every theme */
  --secondary-text: #F3E8D8;
  --on-photo: #F3E8D8;
  --on-photo-2: #C9B59C;

  /* extra-dim lounge palette (applied in section 5) */
  --dim-bg: #0B0806;
  --dim-text: #9C7D4C;
  --dim-text-bright: #B08C45;
  --dim-accent: #8F6A36;
  --dim-track: rgba(156, 125, 76, 0.18);
  --dim-scrim: rgba(11, 8, 6, 0.85);

  /* wrapper shades (data, never decoration) in tobacconist order */
  --wrap-candela: #8E9C57;
  --wrap-claro: #C9A574;
  --wrap-colorado-claro: #B07D4C;
  --wrap-colorado: #8E5A36;
  --wrap-colorado-maduro: #6B3F27;
  --wrap-maduro: #47291C;
  --wrap-oscuro: #2A1913;
  --wrapper-candela: var(--wrap-candela);
  --wrapper-claro: var(--wrap-claro);
  --wrapper-colorado-claro: var(--wrap-colorado-claro);
  --wrapper-colorado: var(--wrap-colorado);
  --wrapper-colorado-maduro: var(--wrap-colorado-maduro);
  --wrapper-maduro: var(--wrap-maduro);
  --wrapper-oscuro: var(--wrap-oscuro);

  /* type: faces
     Google Fonts links for index.html:
     https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,500..600,0..100&display=swap
     https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,wght@6..12,400..700&display=swap */
  --font-display: Fraunces, 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-body: 'Nunito Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Roboto Mono', monospace;
  --display-soft: 'SOFT' 40;
  --display-opsz-title: 'opsz' 72;
  --display-opsz-md: 'opsz' 48;
  --display-opsz-num: 'opsz' 144;

  /* type: scale (px / line-height / weight / tracking) */
  --fs-caption: 13px;   --lh-caption: 1.4;  --fw-caption: 500; --ls-caption: 0.01em;
  --fs-overline: 13px;  --lh-overline: 1.2; --fw-overline: 700; --ls-overline: 0.08em;
  --fs-body: 15px;      --lh-body: 1.5;     --fw-body: 400;
  --fs-label: 15px;     --lh-label: 1.3;    --fw-label: 600;   --ls-label: 0.01em;
  --fs-body-lg: 17px;   --lh-body-lg: 1.45; --fw-body-lg: 500;
  --fs-button: 17px;    --lh-button: 1.2;   --fw-button: 600;
  --fs-title-md: 20px;  --lh-title-md: 1.25; --fw-title-md: 500;
  --fs-title-lg: 24px;  --lh-title-lg: 1.2;  --fw-title-lg: 600; --ls-title-lg: -0.005em;
  --fs-stat: 24px;      --lh-stat: 1.1;      --fw-stat: 600;     --ls-stat: -0.01em;
  --fs-title-xl: 32px;  --lh-title-xl: 1.1;  --fw-title-xl: 600; --ls-title-xl: -0.01em;
  --fs-timer: 72px;     --lh-timer: 1;       --fw-timer: 500;    --ls-timer: -0.02em;
  --fs-timer-dim: 96px;
  --fs-timer-sm: 64px;      /* timer at viewport width <= 360px; opsz stays 144 */
  --fs-timer-dim-sm: 88px;
  --fs-tab: 13px;

  /* shape */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 999px;
  --r-round: 50%;

  /* spacing scale 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 56 · 72 */
  --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-14: 56px;
  --sp-18: 72px;
  --gutter: 16px;
  --col-max: 480px;

  /* sizes */
  --tap-min: 44px;
  --tap: 48px;
  --btn-h: 48px;
  --btn-primary-h: 56px;
  --ignite-h: 72px;
  --topbar-h: 56px;
  --tabbar-h: 64px;
  --actionbar-h: 80px;         /* 12 + 56 + 12 */
  --input-h: 52px;
  --textarea-min: 104px;
  --row-h: 64px;
  --row-h-2: 72px;
  --thumb: 44px;
  --chip-h: 40px;
  --chip-hit: 48px;
  --chip-shop-h: 48px;
  --seg-h: 52px;
  --stepper-btn: 48px;
  --switch-w: 52px;
  --switch-h: 32px;
  --switch-knob: 28px;
  --slider-knob: 28px;
  --slider-track: 4px;
  --fab: 56px;
  --ring-size: 240px;
  --ring-small: 200px;      /* smoke-active ring at <= 360px wide */
  --ring-stroke: 8px;
  --ring-tab: 36px;
  --ring-inline: 40px;
  --stat-min: 88px;
  --toast-h: 56px;
  --dock-h: 64px;              /* .dock drop-target strip above the tab bar */
  --avatar-sm: 32px;
  --avatar-md: 44px;
  --avatar-lg: 64px;
  --icon: 24px;
  --icon-chip: 18px;
  --icon-chevron: 20px;
  --icon-btn: 22px;
  --icon-lg: 28px;
  --icon-empty: 48px;
  --capacity-h: 4px;
  --rating-target: 48px;
  --rating-glyph: 28px;
  --stars-glyph: 16px;
  --sheet-max: 92vh;
  --sheet-half: 60vh;
  --sheet-peek: 40vh;

  /* aliases used by interaction-rules.md and the shell contract */
  --size-tab-bar: var(--tabbar-h);
  --size-top-bar: var(--topbar-h);
  --size-action-bar: var(--actionbar-h);
  --tab-h: var(--tabbar-h);
  --top-h: var(--topbar-h);
  --text-primary: var(--text);
  --text-secondary: var(--text-2);
  --kb: 0px;                   /* keyboard inset, set by App from visualViewport */

  /* safe areas */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* composed heights the layout reads */
  --tabbar-total: calc(var(--tabbar-h) + var(--safe-bottom));
  --topbar-total: calc(var(--topbar-h) + var(--safe-top));

  /* z-index scale */
  --z-topbar: 20;
  --z-dock: 25;
  --z-actionbar: 30;
  --z-fab: 30;
  --z-tabbar: 40;
  --z-sheet: 60;
  --z-toast: 70;
  --z-dim: 80;

  /* focus */
  --focus: 0 0 0 2px var(--bg0), 0 0 0 4px var(--accent);
  --focus-inset: inset 0 0 0 2px var(--bg0), inset 0 0 0 4px var(--accent);
  --disabled-opacity: 1;        /* high contrast lowers it and adds a stroke */

  /* motion */
  --t-instant: 80ms;
  --t-quick: 160ms;
  --t-std: 240ms;
  --t-slow: 400ms;
  --t-ambient: 1200ms;
  --t-sheet-in: 240ms;
  --t-sheet-out: 200ms;
  --t-toast-in: 160ms;
  --t-stagger: 80ms;
  --t-fade: var(--t-quick);     /* opacity-only fades; stays 120ms under reduced motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-ambient: ease-in-out;
  --ease-out: var(--ease-exit);  /* alias used by the shell's inline sheet/toast rules */
  --ease-ring: linear;
  --dur-instant: var(--t-instant);
  --dur-quick: var(--t-quick);
  --dur-standard: var(--t-std);
  --dur-slow: var(--t-slow);
  --dur-ambient: var(--t-ambient);
}

/* --------------------------------------------------------------------------
   3. Light — warm paper. Follows the OS when the app has not chosen dark,
      and always when the app chooses light.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg0: #F2E9DC;
    --bg1: #EAE0D0;
    --surface: #FBF7F0;
    --surface-raised: #FFFFFF;
    --border: #DCCFBE;
    --border-strong: #857258;
    --highlight-warm: rgba(255, 255, 255, 0.6);
    --scrim: rgba(42, 31, 23, 0.40);
    --swatch-keyline: rgba(42, 31, 23, 0.32);
    --photo-vignette: linear-gradient(180deg, rgba(42, 31, 23, 0) 60%, rgba(42, 31, 23, 0.45) 100%);
    --text: #2A1F17;
    --text-2: #5A4A3C;
    --text-muted: #6F5C48;
    --accent: #614815;
    --accent-strong: #4F390E;
    --accent-soft: rgba(97, 72, 21, 0.12);
    --accent-60: rgba(97, 72, 21, 0.60);
    --accent-text: #FBF7F0;
    --secondary: #7A2E2A;
    --success: #4A6A2B;
    --warning: #97510A;
    --danger: #8F2E25;
    --info: #35637D;
    --success-soft: rgba(74, 106, 43, 0.12);
    --warning-soft: rgba(151, 81, 10, 0.12);
    --danger-soft: rgba(143, 46, 37, 0.12);
    --info-soft: rgba(53, 99, 125, 0.12);
    --chart-1: #956A1C;
    --chart-2: #2770A1;
    --chart-3: #A23D56;
    --chart-4: #039385;
    --chart-5: #A358B4;
    --chart-6: #CF5F1D;
    --chart-seq-1: #EAD9B5;
    --chart-seq-2: #D3B781;
    --chart-seq-3: #B8975A;
    --chart-seq-4: #946B25;
    --chart-seq-5: #614815;
    --edge-brass: 0 0 0 0 transparent;
    --edge-brass-pressed: 0 0 0 0 transparent;
    --edge-brass-hot: 0 0 0 0 transparent;
    --shadow-card: 0 1px 2px rgba(42, 31, 23, 0.08);
    --shadow-sheet: 0 -8px 32px rgba(42, 31, 23, 0.18);
    --shadow-float: 0 8px 20px -6px rgba(42, 31, 23, 0.28);
  }
}

:root[data-theme="light"],
body[data-theme="light"] {
  color-scheme: light;
  --bg0: #F2E9DC;
  --bg1: #EAE0D0;
  --surface: #FBF7F0;
  --surface-raised: #FFFFFF;
  --border: #DCCFBE;
  --border-strong: #857258;
  --highlight-warm: rgba(255, 255, 255, 0.6);
  --scrim: rgba(42, 31, 23, 0.40);
  --swatch-keyline: rgba(42, 31, 23, 0.32);
  --photo-vignette: linear-gradient(180deg, rgba(42, 31, 23, 0) 60%, rgba(42, 31, 23, 0.45) 100%);
  --text: #2A1F17;
  --text-2: #5A4A3C;
  --text-muted: #6F5C48;
  --accent: #614815;
  --accent-strong: #4F390E;
  --accent-soft: rgba(97, 72, 21, 0.12);
  --accent-60: rgba(97, 72, 21, 0.60);
  --accent-text: #FBF7F0;
  --secondary: #7A2E2A;
  --success: #4A6A2B;
  --warning: #97510A;
  --danger: #8F2E25;
  --info: #35637D;
  --success-soft: rgba(74, 106, 43, 0.12);
  --warning-soft: rgba(151, 81, 10, 0.12);
  --danger-soft: rgba(143, 46, 37, 0.12);
  --info-soft: rgba(53, 99, 125, 0.12);
  --chart-1: #956A1C;
  --chart-2: #2770A1;
  --chart-3: #A23D56;
  --chart-4: #039385;
  --chart-5: #A358B4;
  --chart-6: #CF5F1D;
  --chart-seq-1: #EAD9B5;
  --chart-seq-2: #D3B781;
  --chart-seq-3: #B8975A;
  --chart-seq-4: #946B25;
  --chart-seq-5: #614815;
  --edge-brass: 0 0 0 0 transparent;
  --edge-brass-pressed: 0 0 0 0 transparent;
  --edge-brass-hot: 0 0 0 0 transparent;
  --shadow-card: 0 1px 2px rgba(42, 31, 23, 0.08);
  --shadow-sheet: 0 -8px 32px rgba(42, 31, 23, 0.18);
  --shadow-float: 0 8px 20px -6px rgba(42, 31, 23, 0.28);
}

/* --------------------------------------------------------------------------
   4. Large text (~15%) and high contrast. Set on <html>; the "body" variants
      make sure they still win over a theme block declared on <body>.
   -------------------------------------------------------------------------- */
html[data-large-text],
html[data-large-text] body,
html[data-text="large"],
html[data-text="large"] body {
  --fs-caption: 15px;
  --fs-overline: 15px;
  --fs-body: 17px;
  --fs-label: 17px;
  --fs-body-lg: 19px;
  --fs-button: 19px;
  --fs-title-md: 22px;
  --fs-title-lg: 27px;
  --fs-stat: 27px;
  --fs-title-xl: 36px;
  --fs-tab: 15px;
  --tabbar-h: 72px;
  --row-h: 72px;
  --row-h-2: 80px;
}

html[data-high-contrast],
html[data-high-contrast] body,
html[data-contrast="high"],
html[data-contrast="high"] body {
  --border: var(--border-strong);
  --text-2: var(--text);
  --text-muted: var(--text);
  --highlight-warm: transparent;
  --focus: 0 0 0 2px var(--bg0), 0 0 0 5px var(--accent);
  --focus-inset: inset 0 0 0 2px var(--bg0), inset 0 0 0 5px var(--accent);
  --disabled-opacity: 0.6;
}
@media (prefers-contrast: more) {
  :root,
  :root body {
    --border: var(--border-strong);
    --text-2: var(--text);
    --text-muted: var(--text);
    --highlight-warm: transparent;
    --focus: 0 0 0 2px var(--bg0), 0 0 0 5px var(--accent);
    --focus-inset: inset 0 0 0 2px var(--bg0), inset 0 0 0 5px var(--accent);
    --disabled-opacity: 0.6;
  }
}

/* --------------------------------------------------------------------------
   5. Extra-dim — the lounge palette. Declared last so it wins over any theme.
      body[data-dim] is what App.setState({dim:true}) sets; the others are aliases.
   -------------------------------------------------------------------------- */
:root[data-dim],
:root[data-dim] body,
body[data-dim],
:root[data-theme="dim"],
:root[data-theme="dim"] body,
body[data-theme="dim"] {
  color-scheme: dark;
  --bg0: var(--dim-bg);
  --bg1: var(--dim-bg);
  --surface: var(--dim-bg);
  --surface-raised: var(--dim-bg);
  --border: var(--dim-track);
  --border-strong: var(--dim-accent);
  --highlight-warm: transparent;
  --scrim: var(--dim-scrim);
  --text: var(--dim-text);
  --text-2: var(--dim-text);
  --text-muted: var(--dim-text);
  --accent: var(--dim-accent);
  --accent-strong: var(--dim-accent);
  --accent-soft: transparent;
  --accent-60: var(--dim-accent);
  --accent-text: var(--dim-bg);
  --success: var(--dim-text);
  --warning: var(--dim-text);
  --danger: var(--dim-text);
  --info: var(--dim-text);
  --success-soft: transparent;
  --warning-soft: transparent;
  --danger-soft: transparent;
  --info-soft: transparent;
  --chart-1: var(--dim-accent);
  --edge-raised: 0 0 0 0 transparent;
  --edge-brass: 0 0 0 0 transparent;
  --edge-brass-pressed: 0 0 0 0 transparent;
  --edge-brass-hot: 0 0 0 0 transparent;
  --shadow-card: 0 0 0 0 transparent;
  --shadow-sheet: 0 0 0 0 transparent;
  --shadow-float: 0 0 0 0 transparent;
  --ignite-gradient: none;
  --focus: 0 0 0 2px var(--dim-bg), 0 0 0 4px var(--dim-text);
  --focus-inset: inset 0 0 0 2px var(--dim-bg), inset 0 0 0 4px var(--dim-text);
  --t-ambient: 0ms;
  /* nothing in dim is set below 15px */
  --fs-caption: 15px;
  --fs-overline: 15px;
  --fs-tab: 15px;
}
/* "Brighter digits" (Settings → Accessibility) and dim under high contrast */
body[data-dim][data-dim-bright],
:root[data-dim-bright] body[data-dim],
html[data-high-contrast] body[data-dim],
html[data-contrast="high"] body[data-dim] {
  --text: var(--dim-text-bright);
  --text-2: var(--dim-text-bright);
  --text-muted: var(--dim-text-bright);
}

/* --------------------------------------------------------------------------
   6. Reduced motion — durations to zero except 120ms opacity fades
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-instant: 0ms;
    --t-quick: 0ms;
    --t-std: 0ms;
    --t-slow: 0ms;
    --t-ambient: 0ms;
    --t-sheet-in: 0ms;
    --t-sheet-out: 0ms;
    --t-toast-in: 0ms;
    --t-stagger: 0ms;
    --t-fade: 120ms;
  }
}
html[data-reduce-motion],
html[data-reduce-motion] body {
  --t-instant: 0ms;
  --t-quick: 0ms;
  --t-std: 0ms;
  --t-slow: 0ms;
  --t-ambient: 0ms;
  --t-sheet-in: 0ms;
  --t-sheet-out: 0ms;
  --t-toast-in: 0ms;
  --t-stagger: 0ms;
  --t-fade: 120ms;
}