/**
 * Theme Variables Layer — InYourBody Design System
 *
 * Canonical --t-* tokens → bridge layer → legacy variables used across style.css.
 * Self-hosted Unbounded + semantic typography roles + Design Lab variant scopes
 * live in this file.
 */

/* ── Unbounded (self-hosted, Cyrillic-ready, PWA/offline) ─────────── */
@font-face {
  font-family: 'Unbounded';
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Unbounded-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Unbounded';
  font-style:  normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/Unbounded-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Unbounded';
  font-style:  normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/Unbounded-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Unbounded';
  font-style:  normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/Unbounded-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Unbounded';
  font-style:  normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/Unbounded-800.woff2') format('woff2');
}

/* ══════════════════════════════════════════════════════════════════════════
   CANONICAL THEME TOKENS (--t-*)
   Source of truth. Changed by theme config only.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand colors ── */
  --t-primary:       #5B3FA8;
  --t-primary-dark:  #2D0F5A;
  --t-primary-light: #7c5fc4;
  --t-primary-rgb:   91,63,168;
  --t-accent:        #F5C800;
  --t-accent-dark:   #d4a900;
  --t-accent-rgb:    245,200,0;
  --t-pink:          #E91E63;
  --t-pink-light:    #fdf2f8;

  /* ── Backgrounds ── */
  --t-bg:            #f5f3ff;
  --t-card:          #ffffff;
  /* Soft lavender — inactive chip/pill/banner/list-row surface. Matches
     canonical --t-primary-tint for brand unity across modules. */
  --t-surface:       #EDE8F8;

  /* ── Text ── */
  --t-text:          #1a1a2e;
  --t-text-muted:    #6b7280;
  --t-text-subtle:   #9ca3af;

  /* ── Borders ── */
  --t-border:        #e5e7eb;
  --t-border-strong: #d1d5db;

  /* ── Tints (soft branded fills: banners, active zones, weight badges) ── */
  --t-primary-tint:  #EDE8F8;
  --t-accent-tint:   rgba(245,200,0,0.10);

  /* ── Status ── */
  --t-danger:        #e53e3e;
  /* Success = brand yellow (no green anywhere in the product). Matches dark
     and violet themes. Use --t-cta-fg (#1a1000) or var(--text) for text on
     success-coloured surfaces — never white (contrast fails on yellow). */
  --t-success:       #F5C800;
  --t-success-rgb:   245,200,0;
  --t-success-soft:  rgba(245,200,0,0.12);
  --t-success-muted: #d4a900;

  /* ── Home V2 premium visual language (v2.53.0) ──
     Branded dark hero card, violet borders, yellow CTAs, yellow done pill.
     No green anywhere in Home/app-shell V2. Glows are the third brand color. */

  /* Shell canvas — Shell V2 only (via body.app-shell). Off-white so the
     deep-violet Training card reads as a confident block against it. */
  --t-shell-bg:          #fafafb;

  /* Hero Training card — deep violet surface, light text, violet halo. */
  --t-hero-bg:           #1e1438;
  --t-hero-border:       rgba(91,63,168,0.40);
  --t-hero-border-hover: rgba(91,63,168,0.65);
  --t-hero-text:         #f5f1ff;
  --t-hero-text-muted:   rgba(245,241,255,0.72);
  --t-hero-glow:         0 0 48px rgba(91,63,168,0.20);
  --t-hero-glow-hover:   0 0 64px rgba(91,63,168,0.34);
  --t-hero-stripe:       #F5C800;
  --t-hero-icon-bg:      rgba(255,255,255,0.08);
  --t-hero-icon-fg:      #ffffff;

  /* Hero check-in fields (empty + filled states) and mood chips. */
  --t-hero-field-bg:            rgba(91,63,168,0.04);
  --t-hero-field-border:        rgba(91,63,168,0.14);
  --t-hero-field-filled-bg:     rgba(245,200,0,0.08);
  --t-hero-field-filled-border: rgba(245,200,0,0.28);
  --t-hero-placeholder:         rgba(26,16,0,0.35);
  --t-hero-mood-bg:             rgba(91,63,168,0.05);
  --t-hero-mood-border:         rgba(91,63,168,0.14);
  --t-hero-mood-on-bg:          rgba(245,200,0,0.16);
  --t-hero-mood-on-border:      rgba(245,200,0,0.50);
  --t-hero-halo:                radial-gradient(circle at 30% 30%, rgba(124,95,196,0.20), transparent 60%);
  --t-hero-inset-highlight:     rgba(255,255,255,0.50);

  /* Yellow CTA — confident, premium. Uses brand accent + dark text + halo. */
  --t-cta-bg:            #F5C800;
  --t-cta-fg:            #1a1000;
  --t-on-primary:        #fff;
  --t-cta-glow:          0 6px 24px rgba(245,200,0,0.30);
  --t-cta-glow-hover:    0 8px 30px rgba(245,200,0,0.42);
  /* Injection-molded inner highlight for CTA — gives the pill physical depth. */
  --t-cta-inset:         inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(0,0,0,0.08);

  /* Row surfaces — violet-tinted borders + micro shadow for depth. */
  --t-row-border:        rgba(91,63,168,0.22);
  --t-row-border-hover:  rgba(91,63,168,0.38);
  --t-row-shadow:        0 2px 12px rgba(91,63,168,0.08);
  --t-row-shadow-hover:  0 6px 22px rgba(91,63,168,0.18);

  /* Icon-chip premium: 1px inset highlight (alpha only, theme-independent). */
  --t-chip-inset:        inset 0 1px 0 rgba(255,255,255,0.10);

  /* Row icon chips — per-role tints + 1px inner ring for premium edge.
     Alphas stepped up in v2.55.0 for confident identity. "Results" row uses
     a deeper primary-dark shade to separate from "Measurements" within the
     violet family (no new hue, just a weight step). */
  --t-chip-rose-bg:      rgba(181,69,106,0.20);
  --t-chip-rose-fg:      #b5456a;
  --t-chip-rose-ring:    rgba(181,69,106,0.22);
  --t-chip-primary-bg:   rgba(91,63,168,0.20);
  --t-chip-primary-fg:   #5B3FA8;
  --t-chip-primary-ring: rgba(91,63,168,0.22);
  --t-chip-accent-bg:    rgba(245,200,0,0.28);
  --t-chip-accent-fg:    #8a6b00;
  --t-chip-accent-ring:  rgba(245,200,0,0.35);
  --t-chip-primary-deep-bg:   rgba(45,15,90,0.16);
  --t-chip-primary-deep-fg:   #2D0F5A;
  --t-chip-primary-deep-ring: rgba(45,15,90,0.28);

  /* Done ✓ pill — brand yellow on ALL themes (no green anywhere). */
  --t-done-bg:           rgba(245,200,0,0.20);
  --t-done-fg:           #8a6b00;

  /* Progress/body domain — macro UX palette (protein/fat/carb) + status
     tones (warn amber / cool info) + "today" highlight. Shared by body.php,
     measurements.php, inbody.php; previously duplicated per-file. */
  --t-macro-protein:     #7c3aed;
  --t-macro-fat:         #d97706;
  --t-macro-carb:        #5B3FA8;
  --t-status-warn:       #d69e2e;
  --t-status-warn-soft:  rgba(214,158,46,0.10);
  --t-status-cool:       #3182ce;
  --t-status-cool-soft:  rgba(49,130,206,0.10);
  --t-today-bg:          rgba(245,200,0,0.16);
  --t-today-fg:          #8a6b00;

  /* Bottom tab bar — floating liquid-glass pill (Liquid Glass variant from the
     design-system prototype). Renders as a floating capsule above the safe
     area; content scrolls under the blur. Mirrors the top dock tokens so the
     two docks bookend content as a matched pair. */
  --t-tab-inactive-fg:   rgba(74,55,120,0.78);

  /* Active bottom tab — solid primary fill, white glyph, primary halo. */
  --t-tab-active-bg:     var(--t-primary);
  --t-tab-active-fg:     #ffffff;
  --t-tab-active-glow:   0 4px 14px rgba(91,63,168,0.32);

  /* Admin mobile shell — bottom tab bar pill bg/border, secondary surface
     (used by drawer-row buttons / chat composer attach btn).
     Mirrors design-system/Admin Mobile Shell.html :root. */
  --t-tab-bar-bg:        #f7f4ff;
  --t-tab-bar-border:    rgba(91,63,168,0.12);
  --t-surface-2:         #f3f1f7;

  /* Admin chat (Iter 1.7b) — drill-down messages.
     - bubble-trainer: темнее --t-primary, чтобы тренер сразу видел "это я
       писал" (не клиент). Клиентский bubble остаётся --t-primary.
     - source-tg: telegram brand blue для pill «via TG» в bubble-meta.
       Source pills `app` / `admin` используют --t-primary / --t-text-muted,
       свои токены не нужны. */
  --t-admin-bubble-trainer: #2a1a4f;
  --t-admin-source-tg:      #229ED9;

  /* Floating top dock — liquid-glass pill. Values mirror the design-system
     prototype (src/InYourBody Dashboard v2). */
  --t-topdock-bg:        rgba(247,244,255,0.60);
  --t-topdock-border:    rgba(255,255,255,0.14);
  --t-topdock-shadow:    0 12px 36px rgba(30,20,56,0.18),
                         0 2px 8px rgba(30,20,56,0.06),
                         inset 0 1px 0 rgba(255,255,255,0.50);

  /* Floating bottom dock — liquid-glass pill. Prototype values tuned for a
     real mobile viewport: directional drop clips against the bottom edge, so
     a non-directional violet halo (mirrors the dark variant) carries the
     elevation. Border is violet-tinted (white-on-white is invisible on cream
     body bg); bg is a touch denser (0.74) to separate from the shell. */
  --t-dock-bg:           rgba(237,232,255,0.74);
  --t-dock-border:       rgba(91,63,168,0.22);
  --t-dock-shadow:       0 12px 36px rgba(30,20,56,0.22),
                         0 2px 8px rgba(30,20,56,0.08),
                         0 0 48px -8px rgba(91,63,168,0.30),
                         inset 0 1px 0 rgba(255,255,255,0.50);

  /* ── Shape — canonical v2.122.0 (row=16, lg=18, pill=999) ── */
  --t-radius:        16px;   /* legacy alias → now aligned to --t-radius-row */
  --t-radius-sm:     8px;
  --t-radius-lg:     18px;   /* hero card */
  --t-radius-row:    16px;   /* list rows */
  --t-radius-pill:   999px;  /* CTAs, chips, done pill */

  /* ── Elevation ── */
  --t-shadow:        0 2px 20px rgba(91,63,168,0.10);
  --t-shadow-btn:    0 4px 14px rgba(91,63,168,0.30);
  --t-shadow-focus:  0 0 0 3px rgba(91,63,168,0.15);

  /* ── Typography ── */
  --t-font:          -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --t-font-display:  'Unbounded', var(--t-font);
  --t-font-mono:     ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale — mobile-first, px to match production exactly (no rem drift). */
  --t-text-11: 11px;  /* tab labels, micro meta */
  --t-text-12: 12px;  /* stat label, meta line */
  --t-text-13: 13px;  /* helper text, caption */
  --t-text-14: 14px;  /* button, secondary body */
  --t-text-15: 15px;  /* primary body, row label */
  --t-text-16: 16px;  /* input, CTA */
  --t-text-17: 17px;  /* row title XL */
  --t-text-18: 18px;  /* top-bar title */
  --t-text-20: 20px;  /* stat value */
  --t-text-26: 26px;  /* hero title (mobile) */
  --t-text-30: 30px;  /* hero title (tall viewport) */
  --t-text-32: 32px;  /* hero title (tablet+) */

  /* Weights */
  --t-weight-regular:  400;
  --t-weight-medium:   500;
  --t-weight-semibold: 600;
  --t-weight-bold:     700;
  --t-weight-black:    800;

  /* Line heights */
  --t-lh-tight:  1.15;
  --t-lh-snug:   1.3;
  --t-lh-base:   1.5;
  --t-lh-loose:  1.6;

  /* Letter spacing */
  --t-tracking-tight:  -0.01em;
  --t-tracking-snug:   -0.005em;
  --t-tracking-normal: 0;
  --t-tracking-wide:   0.04em;
  --t-tracking-wider:  0.08em;

  /* ── Motion ── */
  --t-transition:    0.15s;
  --t-ease-premium:  cubic-bezier(.2,.7,.1,1);
  --t-motion-fast:   120ms;
  --t-motion-base:   180ms;
  --t-motion-enter:  200ms;
}

/* ══════════════════════════════════════════════════════════════════════════
   DARK THEME OVERRIDES
   ══════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
  --t-bg:          #100d1c;
  --t-card:        #1a1630;
  /* Purple-tinted surface for dark (was falling back to light-theme cream). */
  --t-surface:     #1c1638;
  /* Shell canvas — must match dark bg, else inherits light-theme off-white. */
  --t-shell-bg:    #100d1c;
  --t-text:        #ede8ff;
  --t-text-muted:  #9ca3af;
  --t-text-subtle: #6b7280;
  --t-border:      #374151;
  --t-border-strong: #4b5563;
  --t-primary-tint:  #251f45;
  --t-accent-tint:   #1f1a00;
  /* Shadow adjusts for dark — less purple, more neutral */
  --t-shadow:      0 2px 20px rgba(0,0,0,0.25);
  --t-shadow-btn:  0 4px 14px rgba(0,0,0,0.35);
  /* Success accent — brand yellow on dark (matches violet, avoids Material green) */
  --t-success:       #F5C800;
  --t-success-rgb:   245,200,0;
  --t-success-soft:  rgba(245,200,0,0.12);
  --t-success-muted: #d4a900;
  /* Home V2 premium — dark theme overrides. Hero card slightly lifted off
     flat dark bg; border tinged with yellow for energy; halo stronger to
     counteract flat dark absorbing subtle glows. */
  --t-hero-bg:           #1e1438;
  --t-hero-border:       rgba(245,200,0,0.28);
  --t-hero-border-hover: rgba(245,200,0,0.50);
  --t-hero-text:         #f5f1ff;
  --t-hero-text-muted:   rgba(245,241,255,0.72);
  --t-hero-glow:         0 0 60px rgba(91,63,168,0.30);
  --t-hero-glow-hover:   0 0 78px rgba(91,63,168,0.44);
  --t-hero-icon-bg:      rgba(255,255,255,0.08);
  --t-hero-icon-fg:      #ffffff;

  /* Hero check-in fields (empty + filled states) and mood chips. */
  --t-hero-field-bg:            rgba(255,255,255,0.04);
  --t-hero-field-border:        rgba(255,255,255,0.08);
  --t-hero-field-filled-bg:     rgba(255,216,77,0.08);
  --t-hero-field-filled-border: rgba(255,216,77,0.22);
  --t-hero-placeholder:         rgba(240,236,255,0.45);
  --t-hero-mood-bg:             rgba(255,255,255,0.05);
  --t-hero-mood-border:         rgba(255,255,255,0.10);
  --t-hero-mood-on-bg:          rgba(255,216,77,0.16);
  --t-hero-mood-on-border:      rgba(255,216,77,0.50);
  --t-hero-halo:                radial-gradient(circle at 30% 30%, rgba(124,95,196,0.45), transparent 60%);
  --t-hero-inset-highlight:     rgba(255,255,255,0.10);

  --t-row-border:        rgba(124,95,196,0.28);
  --t-row-border-hover:  rgba(124,95,196,0.45);
  --t-row-shadow:        0 2px 16px rgba(0,0,0,0.30);
  --t-row-shadow-hover:  0 6px 26px rgba(0,0,0,0.45);

  --t-chip-rose-bg:      rgba(246,135,179,0.18);
  --t-chip-rose-fg:      #f687b3;
  --t-chip-rose-ring:    rgba(246,135,179,0.28);
  --t-chip-primary-bg:   rgba(124,95,196,0.28);
  --t-chip-primary-fg:   #b4a0e6;
  --t-chip-primary-ring: rgba(124,95,196,0.35);
  --t-chip-accent-bg:    rgba(245,200,0,0.22);
  --t-chip-accent-fg:    #F5C800;
  --t-chip-accent-ring:  rgba(245,200,0,0.38);
  --t-chip-primary-deep-bg:   rgba(180,160,230,0.14);
  --t-chip-primary-deep-fg:   #d4c4f5;
  --t-chip-primary-deep-ring: rgba(180,160,230,0.30);

  --t-done-bg:           rgba(245,200,0,0.18);
  --t-done-fg:           #F5C800;

  /* Progress/body — brighter protein/fat on dark, cooler info blue. */
  --t-macro-protein:     #a78bfa;
  --t-macro-fat:         #f59e0b;
  --t-macro-carb:        #9d85d6;
  --t-status-warn:       #f59e0b;
  --t-status-warn-soft:  rgba(245,158,11,0.14);
  --t-status-cool:       #60a5fa;
  --t-status-cool-soft:  rgba(96,165,250,0.14);
  --t-today-bg:          rgba(245,200,0,0.14);
  --t-today-fg:          #F5C800;

  --t-tab-inactive-fg:   rgba(196,179,235,0.62);

  /* Active tab on dark — brand yellow accent (not violet) so the highlight
     reads as a warm chip against the deep dark canvas. Text on yellow must
     stay dark per WCAG (never #fff). */
  --t-tab-active-bg:     var(--t-success);
  --t-tab-active-fg:     var(--t-cta-fg, #1a1000);
  --t-tab-active-glow:   0 4px 14px rgba(245,200,0,0.45);

  /* Floating top dock — dark glass tint (prototype dark variant). */
  --t-topdock-bg:        rgba(20,13,42,0.55);
  --t-topdock-border:    rgba(255,255,255,0.08);
  --t-topdock-shadow:    0 14px 44px rgba(0,0,0,0.45),
                         0 0 48px -12px rgba(124,95,196,0.35),
                         inset 0 1px 0 rgba(255,255,255,0.06);

  /* Floating bottom dock — matches top dock with deeper ambient violet glow. */
  --t-dock-bg:           rgba(20,13,42,0.55);
  --t-dock-border:       rgba(255,255,255,0.08);
  --t-dock-shadow:       0 14px 44px rgba(0,0,0,0.55),
                         0 0 48px -12px rgba(124,95,196,0.45),
                         inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ══════════════════════════════════════════════════════════════════════════
   BRIDGE: --t-* → EXISTING VARIABLES
   Maps canonical tokens to the variables already used in style.css
   This is the compatibility layer — remove once all CSS is migrated.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --primary:       var(--t-primary);
  --primary-dark:  var(--t-primary-dark);
  --primary-light: var(--t-primary-light);
  --accent:        var(--t-accent);
  --accent-dark:   var(--t-accent-dark);
  --bg:            var(--t-bg);
  --card:          var(--t-card);
  --card-bg:       var(--t-card);
  --text:          var(--t-text);
  --text-muted:    var(--t-text-muted);
  --border:        var(--t-border);
  --danger:        var(--t-danger);
  --success:       var(--t-success);
  --pink:          var(--t-pink);
  --pink-light:    var(--t-pink-light);
  --radius:        var(--t-radius);
  --radius-sm:     var(--t-radius-sm);
  --shadow:        var(--t-shadow);
  --font:          var(--t-font);
}

[data-theme="dark"] {
  --bg:           var(--t-bg);
  --card:         var(--t-card);
  --card-bg:      var(--t-card);
  --text:         var(--t-text);
  --text-muted:   var(--t-text-muted);
  --border:       var(--t-border);
  --shadow:       var(--t-shadow);
}

/* ══════════════════════════════════════════════════════════════════════════
   VIOLET PREMIUM THEME — data-theme="violet"
   Deep dark purple aesthetic with yellow CTA accents.
   Inspired by premium fitness / digital product design.
   ══════════════════════════════════════════════════════════════════════════ */

[data-theme="violet"] {
  /* ── Brand — deeper purple spectrum ── */
  --t-primary:       #7B5CC8;
  --t-primary-dark:  #5B3FA8;
  --t-primary-light: #9d85d6;
  --t-primary-rgb:   123,92,200;
  --t-accent:        #F5C800;
  --t-accent-dark:   #d4a900;
  --t-accent-rgb:    245,200,0;

  /* ── Backgrounds — deep dark layers ── */
  --t-bg:            #0e0920;
  --t-bg-2:          #140d2a;
  --t-bg-3:          #1c1238;
  --t-card:          #1a1432;
  --t-surface:       #1c1238;
  /* Shell canvas — must match violet bg, else inherits light-theme off-white. */
  --t-shell-bg:      #0e0920;

  /* ── Text — high contrast on dark ── */
  --t-text:          #f0ecff;
  --t-text-muted:    #9d92c4;
  --t-text-subtle:   #6b5f8a;

  /* ── Borders — subtle purple glow ── */
  --t-border:        rgba(123,92,200,0.25);
  --t-border-strong: rgba(123,92,200,0.35);
  --t-primary-tint:  #1c1238;
  --t-accent-tint:   rgba(245,200,0,0.06);

  /* ── Status — yellow success to match violet aesthetic ── */
  --t-danger:        #f56565;
  --t-success:       #F5C800;
  --t-success-rgb:   245,200,0;
  --t-success-soft:  rgba(245,200,0,0.10);
  --t-success-muted: #d4a900;
  --t-pink:          #f687b3;
  --t-pink-light:    rgba(246,135,179,0.1);

  /* Home V2 premium — violet theme overrides. Slightly warmer hero,
     yellow edge border, strong violet halo (matches landing featured card). */
  --t-hero-bg:           #1f1540;
  --t-hero-border:       rgba(245,200,0,0.28);
  --t-hero-border-hover: rgba(245,200,0,0.55);
  --t-hero-text:         #f5f1ff;
  --t-hero-text-muted:   rgba(245,241,255,0.72);
  --t-hero-glow:         0 0 60px rgba(91,63,168,0.35);
  --t-hero-glow-hover:   0 0 82px rgba(91,63,168,0.52);
  --t-hero-icon-bg:      rgba(255,255,255,0.08);
  --t-hero-icon-fg:      #ffffff;

  /* Hero check-in fields (empty + filled states) and mood chips. */
  --t-hero-field-bg:            rgba(255,255,255,0.04);
  --t-hero-field-border:        rgba(255,255,255,0.10);
  --t-hero-field-filled-bg:     rgba(255,216,77,0.10);
  --t-hero-field-filled-border: rgba(255,216,77,0.28);
  --t-hero-placeholder:         rgba(240,236,255,0.45);
  --t-hero-mood-bg:             rgba(255,255,255,0.06);
  --t-hero-mood-border:         rgba(255,255,255,0.12);
  --t-hero-mood-on-bg:          rgba(255,216,77,0.18);
  --t-hero-mood-on-border:      rgba(255,216,77,0.55);
  --t-hero-halo:                radial-gradient(circle at 30% 30%, rgba(245,200,0,0.18), transparent 60%);
  --t-hero-inset-highlight:     rgba(255,255,255,0.12);

  --t-row-border:        rgba(157,133,214,0.28);
  --t-row-border-hover:  rgba(157,133,214,0.50);
  --t-row-shadow:        0 2px 18px rgba(0,0,0,0.35);
  --t-row-shadow-hover:  0 6px 28px rgba(0,0,0,0.50);

  --t-chip-rose-bg:      rgba(246,135,179,0.18);
  --t-chip-rose-fg:      #f687b3;
  --t-chip-rose-ring:    rgba(246,135,179,0.28);
  --t-chip-primary-bg:   rgba(157,133,214,0.28);
  --t-chip-primary-fg:   #c4b3eb;
  --t-chip-primary-ring: rgba(157,133,214,0.38);
  --t-chip-accent-bg:    rgba(245,200,0,0.22);
  --t-chip-accent-fg:    #F5C800;
  --t-chip-accent-ring:  rgba(245,200,0,0.40);
  --t-chip-primary-deep-bg:   rgba(196,179,235,0.14);
  --t-chip-primary-deep-fg:   #e4d9f8;
  --t-chip-primary-deep-ring: rgba(196,179,235,0.32);

  --t-done-bg:           rgba(245,200,0,0.16);
  --t-done-fg:           #F5C800;

  /* Progress/body — muted violet-compatible tones on premium dark. */
  --t-macro-protein:     #c4b3eb;
  --t-macro-fat:         #f5c875;
  --t-macro-carb:        #9d85d6;
  --t-status-warn:       #f5c875;
  --t-status-warn-soft:  rgba(245,200,117,0.12);
  --t-status-cool:       #9d85d6;
  --t-status-cool-soft:  rgba(157,133,214,0.12);
  --t-today-bg:          rgba(245,200,0,0.14);
  --t-today-fg:          #F5C800;

  --t-tab-inactive-fg:   rgba(196,179,235,0.60);

  /* Active tab on violet — brand yellow accent (same reasoning as dark). */
  --t-tab-active-bg:     var(--t-success);
  --t-tab-active-fg:     var(--t-cta-fg, #1a1000);
  --t-tab-active-glow:   0 4px 18px rgba(245,200,0,0.55);

  /* Floating top dock — violet glass tint. */
  --t-topdock-bg:        rgba(22,16,46,0.60);
  --t-topdock-border:    rgba(255,255,255,0.08);
  --t-topdock-shadow:    0 14px 44px rgba(0,0,0,0.50),
                         0 0 52px -12px rgba(157,133,214,0.40),
                         inset 0 1px 0 rgba(255,255,255,0.06);

  /* Floating bottom dock — violet glass tint with a stronger ambient halo. */
  --t-dock-bg:           rgba(22,16,46,0.60);
  --t-dock-border:       rgba(255,255,255,0.08);
  --t-dock-shadow:       0 14px 44px rgba(0,0,0,0.55),
                         0 0 52px -12px rgba(157,133,214,0.50),
                         inset 0 1px 0 rgba(255,255,255,0.06);

  /* ── Shape — slightly more rounded ── */
  --t-radius:        16px;
  --t-radius-sm:     10px;

  /* ── Elevation — purple glow shadows ── */
  --t-shadow:        0 4px 24px rgba(91,63,168,0.20);
  --t-shadow-btn:    0 4px 20px rgba(245,200,0,0.25);
  --t-shadow-focus:  0 0 0 3px rgba(123,92,200,0.30);

  /* ── Typography — Unbounded for headings ── */
  --t-font-display:  'Unbounded', var(--t-font);

  /* ── Extra tokens for violet ── */
  --t-nav-bg:        rgba(14,9,32,0.88);
  --t-nav-border:    rgba(123,92,200,0.2);
  --t-input-bg:      #140d2a;
  --t-input-border:  rgba(123,92,200,0.3);
  --t-glow-primary:  rgba(91,63,168,0.35);
  --t-glow-accent:   rgba(245,200,0,0.08);
}

/* Violet bridge layer — same pattern as dark */
[data-theme="violet"] {
  --bg:           var(--t-bg);
  --bg-2:         var(--t-bg-2);
  --bg-3:         var(--t-bg-3);
  --card:         var(--t-card);
  --card-bg:      var(--t-card);
  --text:         var(--t-text);
  --text-muted:   var(--t-text-muted);
  --border:       var(--t-border);
  --shadow:       var(--t-shadow);
  --danger:       var(--t-danger);
  --success:      var(--t-success);
  --pink:         var(--t-pink);
  --pink-light:   var(--t-pink-light);
  --bg-alt:       var(--t-bg-2);
}

/* ── Layout refinements ──────────────────────────────────────────── */
body .main { padding-top: 4px; }

/* ══════════════════════════════════════════════════════════════════════════
   SEMANTIC TYPOGRAPHY ROLES
   Use these in new components instead of wiring size/weight/tracking by hand.
   Kept opt-in — legacy code is untouched.
   ══════════════════════════════════════════════════════════════════════════ */

.t-display {
  font-family: var(--t-font-display);
  font-size: var(--t-text-26);
  font-weight: var(--t-weight-black);
  letter-spacing: var(--t-tracking-tight);
  line-height: var(--t-lh-tight);
  color: var(--t-text);
}
@media (min-height: 720px) { .t-display { font-size: var(--t-text-30); } }
@media (min-width:  900px) { .t-display { font-size: var(--t-text-32); } }

.t-h1 {
  font-family: var(--t-font-display);
  font-size: 22px;
  font-weight: var(--t-weight-black);
  letter-spacing: var(--t-tracking-tight);
  line-height: var(--t-lh-tight);
  color: var(--t-text);
}

.t-h2,
.t-topbar-title {
  font-family: var(--t-font);
  font-size: var(--t-text-18);
  font-weight: var(--t-weight-bold);
  letter-spacing: var(--t-tracking-snug);
  line-height: var(--t-lh-snug);
  color: var(--t-text);
}

.t-row-title {
  font-family: var(--t-font);
  font-size: var(--t-text-17);
  font-weight: var(--t-weight-semibold);
  letter-spacing: var(--t-tracking-snug);
  line-height: 1.25;
  color: var(--t-text);
}

.t-body {
  font-family: var(--t-font);
  font-size: var(--t-text-15);
  font-weight: var(--t-weight-medium);
  line-height: var(--t-lh-base);
  color: var(--t-text);
}

.t-body-muted {
  font-family: var(--t-font);
  font-size: var(--t-text-15);
  font-weight: var(--t-weight-medium);
  line-height: 1.4;
  color: var(--t-text-muted);
}

.t-meta {
  font-family: var(--t-font);
  font-size: var(--t-text-13);
  font-weight: var(--t-weight-medium);
  line-height: 1.4;
  color: var(--t-text-muted);
}

.t-eyebrow {
  font-family: var(--t-font);
  font-size: var(--t-text-13);
  font-weight: var(--t-weight-semibold);
  letter-spacing: var(--t-tracking-wider);
  text-transform: uppercase;
  color: var(--t-text-muted);
}

.t-stat {
  font-family: var(--t-font-display);
  font-size: var(--t-text-20);
  font-weight: var(--t-weight-black);
  letter-spacing: var(--t-tracking-tight);
  line-height: var(--t-lh-tight);
  font-variant-numeric: tabular-nums;
  color: var(--t-text);
}

.t-button {
  font-family: var(--t-font);
  font-size: var(--t-text-15);
  font-weight: var(--t-weight-bold);
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.t-tab {
  font-family: var(--t-font);
  font-size: var(--t-text-11);
  font-weight: var(--t-weight-medium);
  line-height: 1;
}

.t-mono {
  font-family: var(--t-font-mono);
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════════════════════
   DESIGN LAB — admin-only visual variants
   Activated via data-attributes on <html> / <body> by profile.js.
   Non-admin users never set these, so defaults are the production look.
   Guardrails:
     • Yellow #F5C800 remains the single CTA family in every variant.
     • No green anywhere, in any palette.
     • Legacy pages (no body.app-shell) are not affected by dock/topbar scopes.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Palette: expanded (adds coral / mint as row-chip-only secondary tones,
   never replaces yellow CTA) ───────────────────────────────────────────── */
[data-palette="expanded"] {
  --t-chip-coral-bg:   rgba(255,122,117,0.20);
  --t-chip-coral-fg:   #c04a45;
  --t-chip-coral-ring: rgba(255,122,117,0.28);

  --t-chip-mint-bg:   rgba(125,211,186,0.22);
  --t-chip-mint-fg:   #35806b;
  --t-chip-mint-ring: rgba(125,211,186,0.32);

  /* Re-tint the rose chip toward coral for Home/check-in + deep chip toward
     mint for Profile/results. Keeps layout untouched; swaps hue only. */
  --t-chip-rose-bg:         var(--t-chip-coral-bg);
  --t-chip-rose-fg:         var(--t-chip-coral-fg);
  --t-chip-rose-ring:       var(--t-chip-coral-ring);
  --t-chip-primary-deep-bg:   var(--t-chip-mint-bg);
  --t-chip-primary-deep-fg:   var(--t-chip-mint-fg);
  --t-chip-primary-deep-ring: var(--t-chip-mint-ring);
}
[data-theme="dark"][data-palette="expanded"],
[data-theme="violet"][data-palette="expanded"] {
  --t-chip-coral-fg:   #ff9a96;
  --t-chip-mint-fg:    #9bd6c1;
  --t-chip-rose-fg:         var(--t-chip-coral-fg);
  --t-chip-primary-deep-fg: var(--t-chip-mint-fg);
}

/* ── Bottom dock design-lab hook. Geometry mirrors Shell V2; keep visual
   experiments from changing mobile chrome placement. ───────────────────── */
body.app-shell[data-dock="floating"] .app-tabs {
  left: 12px;
  right: 12px;
  bottom: var(--mobile-shell-dock-bottom, 20px);
  height: auto;
  padding: var(--mobile-shell-dock-pad-top, 6px) var(--mobile-shell-dock-pad-x, 6px) var(--mobile-shell-dock-pad-bottom, 6px);
  border-top: none;
  border: 1px solid var(--t-dock-border);
  border-radius: 26px;
  box-shadow: var(--t-dock-shadow);
  backdrop-filter: blur(22px) saturate(1.7);
  -webkit-backdrop-filter: blur(22px) saturate(1.7);
}
body.app-shell[data-dock="floating"] .app-content {
  padding-bottom: calc(
    var(--app-tabs-h)
    + env(safe-area-inset-bottom, 0)
    + 24px
    + var(--kb-inset)
    + var(--ios-browser-scroll-slack, 0px)
  );
}

/* ── Rest-day hero variant (training/body hero) ── */
[data-rest="violet"] .tr-hero--primary,
[data-rest="violet"] .home-card[data-variant="R"] {
  --t-hero-bg: #1f1540;
  --t-hero-border: rgba(245,200,0,0.34);
  --t-hero-glow: 0 0 64px rgba(91,63,168,0.28);
}

/* Yellow hero CTA text must stay the same dark-on-yellow contrast in both
   dark surfaces. Scoped to hero CTAs so regular accent buttons keep their
   local semantics. */
[data-theme="dark"] .hero__cta,
[data-theme="dark"] .home-card__cta,
[data-theme="dark"] .home-check-hero__cta,
[data-theme="dark"] .home-prompt__cta,
[data-theme="dark"] .mh-cta,
[data-theme="dark"] .tr-hero--primary .tr-hero__cta,
[data-theme="dark"] .tr-hero--warn .tr-hero__cta,
[data-theme="violet"] .hero__cta,
[data-theme="violet"] .home-card__cta,
[data-theme="violet"] .home-check-hero__cta,
[data-theme="violet"] .home-prompt__cta,
[data-theme="violet"] .mh-cta,
[data-theme="violet"] .tr-hero--primary .tr-hero__cta,
[data-theme="violet"] .tr-hero--warn .tr-hero__cta {
  color: var(--t-cta-fg, #1a1000);
}

/* ── Finish / summary screen — quiet variant ── */
[data-summary="quiet"] .vbp-summary-card,
[data-summary="quiet"] .vbp-summary-overlay .vbp-summary-card {
  background: var(--t-card);
  color: var(--t-text);
  box-shadow: var(--t-row-shadow);
}
[data-summary="quiet"] .vbp-summary-pill,
[data-summary="quiet"] .vbp-summary-pills .vbp-summary-pill--primary {
  background: color-mix(in srgb, var(--t-primary) 10%, transparent);
  color: var(--t-primary);
  border: 1px solid var(--t-row-border);
}
[data-summary="quiet"] .vbp-summary-stat__val {
  color: var(--t-text);
}