/* ═══════════════════════════════════════════════════════════════
   THEME TOKENS
   All colours derive from 6 seed values via color-mix().
   Every derived token has a hardcoded fallback line above it.
   Change the 6 seeds in §1 to re-theme the entire app.
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ═══════════════════════════════════════════════════════════════
       §1  SEED COLOURS — the ONLY values you change to re-skin the app
       ═══════════════════════════════════════════════════════════════ */
    --t-accent: #D7B262; /* brand accent — decorative: borders, rules, badges       */
    --t-primary: #67003C; /* brand primary — ALL interactive states              */
    --t-text: #424242; /* primary body text                                      */
    --t-error: #C62828; /* error / destructive states                             */
    --t-page-bg: whitesmoke; /* app background                                         */
    --t-card-bg: #f6f4ef; /* standard card / panel white                             */
    /* ─── §2  Derived brand shades ──────────────────────────────── */
    --t-accent-dark: #8E793E; /* fallback */
    --t-accent-dark: color-mix(in srgb, var(--t-accent), black 35%);
    --t-accent-light: #AD974F; /* fallback */
    --t-accent-light: color-mix(in srgb, var(--t-accent), black 20%);
    --t-primary-light: #D6BCC6; /* fallback */
    --t-primary-light: color-mix(in srgb, var(--t-primary), white 80%);
    /* ─── §3  Derived surfaces ──────────────────────────────────── */
    --t-card-bg-warm: #fefdfb; /* fallback */
    --t-card-bg-warm: color-mix(in srgb, var(--t-accent), var(--t-card-bg) 98%);
    --t-header-bg: #e6e1d4; /* fallback */
    --t-header-bg: color-mix(in srgb, var(--t-accent), var(--t-page-bg) 88%);
    /* Control/input surface — lighter than card body so inputs read as interactive   */
    --t-control-bg: #fcfbf8; /* fallback */
    --t-control-bg: color-mix(in srgb, var(--t-card-bg), white 60%);
    /* ─── §4  Derived borders ───────────────────────────────────── */
    --t-border: rgba(0, 0, 0, 0.06); /* fallback */
    --t-border: color-mix(in srgb, black, transparent 94%);
    --t-border-input: rgba(0, 0, 0, 0.12); /* fallback */
    --t-border-input: color-mix(in srgb, black, transparent 88%);
    --t-border-strong: rgba(0, 0, 0, 0.08); /* fallback */
    --t-border-strong: color-mix(in srgb, black, transparent 92%);
    --t-border-accent: rgba(215, 178, 98, 0.25); /* fallback */
    --t-border-accent: color-mix(in srgb, var(--t-accent), transparent 75%);
    --t-border-accent-mid: rgba(215, 178, 98, 0.35); /* fallback */
    --t-border-accent-mid: color-mix(in srgb, var(--t-accent), transparent 65%);
    --t-border-accent-full: #D7B262; /* fallback */
    --t-border-accent-full: var(--t-accent);
    --t-border-primary: rgba(103, 0, 60, 0.15); /* fallback */
    --t-border-primary: color-mix(in srgb, var(--t-primary), transparent 85%);
    /* ─── §5  Derived tints (hover / fill overlays) ─────────────── */
    --t-accent-tint-4: rgba(215, 178, 98, 0.04); /* fallback */
    --t-accent-tint-4: color-mix(in srgb, var(--t-accent), transparent 96%);
    --t-accent-tint-8: rgba(215, 178, 98, 0.08); /* fallback */
    --t-accent-tint-8: color-mix(in srgb, var(--t-accent), transparent 92%);
    --t-accent-tint-10: rgba(215, 178, 98, 0.10); /* fallback */
    --t-accent-tint-10: color-mix(in srgb, var(--t-accent), transparent 90%);
    --t-accent-tint-12: rgba(215, 178, 98, 0.12);
    --t-accent-tint-12: color-mix(in srgb, var(--t-accent), transparent 88%);
    --t-border-accent-light: rgba(215, 178, 98, 0.18);
    --t-border-accent-light: color-mix(in srgb, var(--t-accent), transparent 82%);
    --t-accent-tint-25: rgba(215, 178, 98, 0.25); /* fallback */
    --t-accent-tint-25: color-mix(in srgb, var(--t-accent), transparent 75%);
    --t-row-hover: rgba(215, 178, 98, 0.025); /* fallback */
    --t-row-hover: color-mix(in srgb, var(--t-accent), transparent 97.5%);
    --t-primary-tint-5: rgba(103, 0, 60, 0.05); /* fallback */
    --t-primary-tint-5: color-mix(in srgb, var(--t-primary), transparent 95%);
    --t-primary-tint-8: rgba(103, 0, 60, 0.08); /* fallback */
    --t-primary-tint-8: color-mix(in srgb, var(--t-primary), transparent 92%);
    --t-primary-tint-12: rgba(103, 0, 60, 0.12); /* fallback */
    --t-primary-tint-12: color-mix(in srgb, var(--t-primary), transparent 88%);
    --t-primary-tint-15: rgba(103, 0, 60, 0.15); /* fallback */
    --t-primary-tint-15: color-mix(in srgb, var(--t-primary), transparent 85%);
    --t-primary-tint-25: rgba(214, 188, 198, 0.25); /* fallback */
    --t-primary-tint-25: color-mix(in srgb, var(--t-primary-light), transparent 75%);
    /* ─── §6  Derived error states ──────────────────────────────── */
    --t-error-icon: #C62828; /* fallback */
    --t-error-icon: var(--t-error);
    --t-error-bg: #fef7f7; /* fallback */
    --t-error-bg: color-mix(in srgb, var(--t-error), var(--t-card-bg) 97%);
    --t-error-border: rgba(198, 40, 40, 0.15); /* fallback */
    --t-error-border: color-mix(in srgb, var(--t-error), transparent 85%);
    /* ─── §7  Shadows ───────────────────────────────────────────── */
    --t-shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06);
    --t-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.06);
    --t-shadow-lift: 0 4px 16px rgba(0, 0, 0, 0.10);
    /* ─── §9  Typography ────────────────────────────────────────── */
    --t-font-heading: 'Playfair Display', Georgia, serif;
    --t-font-body: 'Roboto', system-ui, sans-serif;
    /* ─── §10 Transitions ───────────────────────────────────────── */
    --t-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    /* ═══════════════════════════════════════════════════════════════
   PHASE 9 — NEW ROOT TOKENS
   Paste these AFTER the existing §1.5 tints block and BEFORE
   the §1.6 semantic colours block in CustomSheet.css :root { }
   ═══════════════════════════════════════════════════════════════ */
    /* ─── §9a  Primary tints (additional) ───────────────────────── */
    /* Interactive hover border — buttons, inputs, slider thumb        */
    --t-primary-tint-20: rgba(103, 0, 60, 0.20); /* fallback */
    --t-primary-tint-20: color-mix(in srgb, var(--t-primary), transparent 80%);
    /* Strong interactive border — input hover, slider thumb hover     */
    --t-primary-tint-30: rgba(103, 0, 60, 0.30); /* fallback */
    --t-primary-tint-30: color-mix(in srgb, var(--t-primary), transparent 70%);
    /* ─── §9b  Primary dark — filled button hover ──────────────── */
    /* Darkened primary for CTA :hover states (btn-next, bd-footer-btn-primary) */
    --t-primary-dark: #7a0047; /* fallback */
    --t-primary-dark: color-mix(in srgb, var(--t-primary), black 15%);
    /* ─── §9c  Accent tints (additional) ───────────────────────── */
    /* Subtle accent separator — label borders, badge/pill backgrounds */
    --t-accent-tint-6: rgba(215, 178, 98, 0.06); /* fallback */
    --t-accent-tint-6: color-mix(in srgb, var(--t-accent), transparent 94%);
    /* Medium accent border — title badge borders across panels        */
    --t-accent-tint-15: rgba(215, 178, 98, 0.15); /* fallback */
    --t-accent-tint-15: color-mix(in srgb, var(--t-accent), transparent 85%);
    /* Strong accent border — pricing badge, rules button, draw title  */
    --t-accent-tint-30: rgba(215, 178, 98, 0.30); /* fallback */
    --t-accent-tint-30: color-mix(in srgb, var(--t-accent), transparent 70%);
    /* ─── §9d  Neutral washes ──────────────────────────────────── */
    /* Ultra-light separator — toolbar borders, nav section dividers   */
    --t-neutral-4: rgba(0, 0, 0, 0.04); /* fallback */
    --t-neutral-4: color-mix(in srgb, black, transparent 96%);
    /* Light panel border — PanelContainer, close hover, drawer footer */
    --t-neutral-5: rgba(0, 0, 0, 0.05); /* fallback */
    --t-neutral-5: color-mix(in srgb, black, transparent 95%);
    /* ─── §9e  Grey text scale — critical for dark theme flip ──── */
    /* Muted UI elements — nav icons, description text, error values   */
    --t-text-muted: #757575;
    /* Secondary text — labels, subtitles, header cells, close icons   */
    --t-text-secondary: #999;
    /* Tertiary text — placeholders, hints, struck prices, muted vals  */
    --t-text-tertiary: #bbb;
    /* Print-only borders — table/card/badge borders in @media print   */
    --t-print-border: #ddd;
    /* Warm label text — DiscountInputBox extras labels (1st, 2nd, 3rd)*/
    --t-text-label-warm: #b0a89e;
    /* Slider/progress unfilled track — warm grey                      */
    --t-track-bg: #e8e4df;
    /* ─── §9f  On-primary — foreground on --t-primary backgrounds ── */
    /* Text/icons sitting on filled primary surfaces — buttons, thumbs */
    --t-on-primary: white;
    /* ─── §9g  Primary-derived shadows ─────────────────────────── */
    /* Focus ring glow — inputs, selects, interactive focus states     */
    --t-shadow-focus-ring: 0 0 0 3px rgba(103, 0, 60, 0.06); /* fallback */
    --t-shadow-focus-ring: 0 0 0 3px color-mix(in srgb, var(--t-primary), transparent 94%);
    /* CTA hover lift — filled primary button hover glow               */
    --t-shadow-primary-hover: 0 4px 12px rgba(103, 0, 60, 0.20); /* fallback */
    --t-shadow-primary-hover: 0 4px 12px color-mix(in srgb, var(--t-primary), transparent 80%);
    /* Slider thumb resting shadow                                     */
    --t-shadow-thumb: 0 1px 4px rgba(103, 0, 60, 0.20); /* fallback */
    --t-shadow-thumb: 0 1px 4px color-mix(in srgb, var(--t-primary), transparent 80%);
    /* ─── §9h  Neutral shadows (additional) ────────────────────── */
    /* Ultra-subtle resting shadow — panels, small active states       */
    --t-shadow-subtle: 0 1px 4px rgba(0, 0, 0, 0.03);
    /* Small button hover shadow — icon buttons, footer buttons        */
    --t-shadow-btn-hover: 0 2px 6px rgba(0, 0, 0, 0.06);
    /* Dramatic resting shadow — hero tiles, card hover lifts          */
    --t-shadow-dramatic: 0 8px 30px rgba(0, 0, 0, 0.12);
    /* Dramatic hover shadow — deep tile hover lift                    */
    --t-shadow-dramatic-hover: 0 20px 50px rgba(0, 0, 0, 0.18);
    /* FAB resting shadow                                              */
    --t-shadow-fab: 0 4px 16px rgba(0, 0, 0, 0.08);
    /* FAB hover shadow                                                */
    --t-shadow-fab-hover: 0 6px 24px rgba(0, 0, 0, 0.12);
    /* ─── §9i  Overlay & glass surfaces — flip entirely in dark theme ── */
    /* Near-opaque overlay wash (Index bg-overlay gradient stop 1)     */
    --t-overlay-heavy: rgba(255, 255, 255, 0.92);
    /* Mid overlay wash (Index bg-overlay gradient stop 2)             */
    --t-overlay-mid: rgba(255, 255, 255, 0.82);
    /* Soft overlay wash (Index bg-overlay gradient stop 3)            */
    --t-overlay-soft: rgba(255, 255, 255, 0.65);
    /* Frosted glass bg — Index settings FAB                           */
    --t-glass-bg: rgba(255, 255, 255, 0.9);
    /* Frosted glass bg — MainLayout appbar (separate for fine control)*/
    --t-glass-bg-appbar: rgba(250, 250, 250, 0.92);
    /* Dark scrim over images — text readability overlay               */
    --t-scrim: rgba(0, 0, 0, 0.75);
    /* Cell overlay dim — custom dimension labels on table cells       */
    --t-overlay-dim: rgba(255, 255, 255, 0.85);
    /* ─── §9j  On-dark — foreground over dark overlays / scrims ─── */
    /* Bright text/icons over dark backgrounds                         */
    --t-on-dark: #fff;
    /* Muted text over dark backgrounds (subtitles)                    */
    --t-on-dark-muted: rgba(255, 255, 255, 0.7);
    /* Faint elements over dark backgrounds (borders, arrows)          */
    --t-on-dark-faint: rgba(255, 255, 255, 0.4);
    /* ─── §9k  Error tints (additional) ────────────────────────── */
    /* Error element background — icon circles, numbered badges        */
    --t-error-tint-8: rgba(198, 40, 40, 0.08); /* fallback */
    --t-error-tint-8: color-mix(in srgb, var(--t-error), transparent 92%);
    /* Subtle error row highlight — list item backgrounds              */
    --t-error-tint-3: rgba(198, 40, 40, 0.03); /* fallback */
    --t-error-tint-3: color-mix(in srgb, var(--t-error), transparent 97%);
    /* ─── §9l  Draw area surface ───────────────────────────────── */
    /* SVG draw area warm gradient — CabinPanelWindow + DimensionsPanel */
    --t-bg-draw-area: linear-gradient(135deg, #fafafa, #f6f4f0);
    /* ═══════════════════════════════════════════════════════════════
       LEGACY ALIASES — keep during migration.
       Old var(--BronzeGold) references in un-swept files still
       resolve via these. Remove once sweep is 100% complete.
       ═══════════════════════════════════════════════════════════════ */
    --BronzeGold: var(--t-accent);
    --BronzeDarkPink: var(--t-primary);
    --BronzePink: var(--t-primary-light);
    --customDark: var(--t-text);
    --customDarkGold: var(--t-accent-dark);
    --customLightGold: var(--t-accent-light);
    /* ═══════════════════════════════════════════════════════════════
       NON-THEME VARIABLES — kept as-is, not part of the token system
       ═══════════════════════════════════════════════════════════════ */
    --customRed: #9D080D;
    --customIndigo: #3F51B5;
    --customLightBlue: #C0CCDA;
    --customLightIndigo: #abb3e1;
    --BronzeGray: #D1D3D4;
    --customLightRed: rgba(185,37,37,1);
    --customGray: #E0E0E0;
    --customVeryLightGray: rgba(192,192,192,0.2);
    --MudPrimaryColor: #594ae2ff; /*Purplish*/
    --customPrimary: var(--t-primary);
    --customLightPrimary: var(--t-primary-light);
    --ButtonColor: var(--customPrimary);
    --BackgroundColor: #f1f1f1;
    /*Accessory Card Variables*/
    --AccessoryCardColor2: var(--customPrimary);
    --AccessoryCardBgColor: var(--BackgroundColor);
    --AccessoryCardItemsFill: var(--BackgroundColor);
    --AccessoryCardFilledTextColor: var(--t-text);
    --AccessoriesPrimaryColor: var(--t-accent);
    --AccessoriesSecondaryColor: var(--t-primary);
    --customLightGray: #dedede;
    --goldBackground: linear-gradient(to bottom right, #ffffff 0%, #f7f2e6 30%, #f5f5f5 70%, #ece0c6 100%);
    --tab-hover-bg: rgba(214, 188, 198, 0.1);
    --tab-active-bg: rgba(214, 188, 198, 0.3);
    /*claude*/
    --card-bg: white;
    --card-shadow: rgba(0,0,0,0.1);
    --card-shadow-hover: rgba(0,0,0,0.15);
    --card-title-bg: rgba(255, 255, 255, 0.85);
    --image-filter-hover: brightness(0.85);
}