/* ============================================================
   BrandKit CSS — Generated from Material 3 / Stitch tokens
   ============================================================

   USAGE:
   -------
   Light mode (default):  <html class="theme-light">
   Dark  mode (manual):   <html class="theme-dark">
   Auto  mode (OS pref):  <html>  (uses prefers-color-scheme)

   Toggle dark mode with JavaScript:
     document.documentElement.classList.toggle('theme-dark');
     document.documentElement.classList.toggle('theme-light');

   Or use the data attribute approach:
     <html data-theme="dark">
   ============================================================ */

/* ── Reference Tokens: Tonal Palettes ─────────────────────── */
:root {
  --md-ref-palette-primary0: #000000;
  --md-ref-palette-primary10: #101C2C;
  --md-ref-palette-primary20: #263143;
  --md-ref-palette-primary30: #3D475A;
  --md-ref-palette-primary40: #545F73;
  --md-ref-palette-primary50: #6D778C;
  --md-ref-palette-primary60: #8691A7;
  --md-ref-palette-primary70: #A1ABC2;
  --md-ref-palette-primary80: #BCC7DE;
  --md-ref-palette-primary90: #D8E3FA;
  --md-ref-palette-primary95: #E6F1FF;
  --md-ref-palette-primary99: #F1FDFF;
  --md-ref-palette-primary100: #FFFFFF;

  --md-ref-palette-secondary0: #000000;
  --md-ref-palette-secondary10: #2D1700;
  --md-ref-palette-secondary20: #422C0E;
  --md-ref-palette-secondary30: #5B4223;
  --md-ref-palette-secondary40: #75593A;
  --md-ref-palette-secondary50: #8F7251;
  --md-ref-palette-secondary60: #AA8B69;
  --md-ref-palette-secondary70: #C6A583;
  --md-ref-palette-secondary80: #E3C19D;
  --md-ref-palette-secondary90: #FFDCB8;
  --md-ref-palette-secondary95: #FFEBC6;
  --md-ref-palette-secondary99: #FFF6D1;
  --md-ref-palette-secondary100: #FFFFFF;

  --md-ref-palette-tertiary0: #000000;
  --md-ref-palette-tertiary10: #131E11;
  --md-ref-palette-tertiary20: #273426;
  --md-ref-palette-tertiary30: #3D4A3B;
  --md-ref-palette-tertiary40: #546252;
  --md-ref-palette-tertiary50: #6C7B6A;
  --md-ref-palette-tertiary60: #869584;
  --md-ref-palette-tertiary70: #A0AF9E;
  --md-ref-palette-tertiary80: #BBCBB9;
  --md-ref-palette-tertiary90: #D7E7D4;
  --md-ref-palette-tertiary95: #E5F5E2;
  --md-ref-palette-tertiary99: #F0FFEE;
  --md-ref-palette-tertiary100: #FFFFFF;

  --md-ref-palette-neutral0: #000000;
  --md-ref-palette-neutral10: #2A1800;
  --md-ref-palette-neutral20: #402C1A;
  --md-ref-palette-neutral30: #58432F;
  --md-ref-palette-neutral40: #715A46;
  --md-ref-palette-neutral50: #8B725D;
  --md-ref-palette-neutral60: #A68C76;
  --md-ref-palette-neutral70: #C1A690;
  --md-ref-palette-neutral80: #DDC1AA;
  --md-ref-palette-neutral90: #FADDC5;
  --md-ref-palette-neutral95: #FFECD3;
  --md-ref-palette-neutral99: #FFF7DF;
  --md-ref-palette-neutral100: #FFFFFF;
}

/* ── Typography Tokens ────────────────────────────────────── */
:root {
  --md-ref-typeface-brand: Great Vibes;
  --md-ref-typeface-plain: Great Vibes;
  --md-ref-typeface-label: Great Vibes;

  --md-sys-typescale-display-large: 500 3.5625rem/4rem Great Vibes;
  --md-sys-typescale-display-medium: 500 2.8125rem/3.25rem Great Vibes;
  --md-sys-typescale-display-small: 500 2.25rem/2.75rem Great Vibes;
  --md-sys-typescale-headline-large: 500 2rem/2.5rem Great Vibes;
  --md-sys-typescale-headline-medium: 500 1.75rem/2.25rem Great Vibes;
  --md-sys-typescale-headline-small: 500 1.5rem/2rem Great Vibes;
  --md-sys-typescale-title-large: 500 1.375rem/1.75rem Great Vibes;
  --md-sys-typescale-title-medium: 500 1rem/1.5rem Great Vibes;
  --md-sys-typescale-title-small: 500 0.875rem/1.25rem Great Vibes;
  --md-sys-typescale-body-large: 400 1rem/1.5rem Great Vibes;
  --md-sys-typescale-body-medium: 400 0.875rem/1.25rem Great Vibes;
  --md-sys-typescale-body-small: 400 0.75rem/1rem Great Vibes;
  --md-sys-typescale-label-large: 500 0.875rem/1.25rem Great Vibes;
  --md-sys-typescale-label-medium: 500 0.75rem/1rem Great Vibes;
  --md-sys-typescale-label-small: 500 0.6875rem/1rem Great Vibes;
}

/* ── Light Theme (default) ────────────────────────────────── */
:root,
.theme-light,
[data-theme="light"] {
  color-scheme: light;
  --md-sys-color-primary: #031021;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-on-primary-dim: #545F73;
  --md-sys-color-primary-container: #D8E3FA;
  --md-sys-color-on-primary-container: #101C2C;
  --md-sys-color-secondary: #957756;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-on-secondary-dim: #75593A;
  --md-sys-color-secondary-container: #FFDCB8;
  --md-sys-color-on-secondary-container: #2D1700;
  --md-sys-color-tertiary: #81907F;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-on-tertiary-dim: #546252;
  --md-sys-color-tertiary-container: #D7E7D4;
  --md-sys-color-on-tertiary-container: #131E11;
  --md-sys-color-neutral: #A98F79;
  --md-sys-color-on-neutral: #000000;
  --md-sys-color-on-neutral-dim: #715A46;
  --md-sys-color-neutral-container: #FADDC5;
  --md-sys-color-on-neutral-container: #2A1800;
  --md-sys-color-surface: #FFF4DC;
  --md-sys-color-on-surface: #2A1800;
  --md-sys-color-on-surface-dim: #715A46;
  --md-sys-color-surface-dim: #F2D5BD;
  --md-sys-color-surface-bright: #FFF4DC;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #FFEED6;
  --md-sys-color-surface-container: #FFE9D1;
  --md-sys-color-surface-container-high: #FFE3CB;
  --md-sys-color-surface-container-highest: #FADDC5;
  --md-sys-color-on-surface-variant: #58432F;
  --md-sys-color-on-surface-variant-dim: #715A46;
  --md-sys-color-outline: #8B725D;
  --md-sys-color-outline-variant: #DDC1AA;
  --md-sys-color-inverse-surface: #402C1A;
  --md-sys-color-inverse-on-surface: #FFECD3;
  --md-sys-color-inverse-primary: #BCC7DE;
  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;
}

/* ── Dark Theme (class toggle) ────────────────────────────── */
.theme-dark,
[data-theme="dark"] {
  color-scheme: dark;
  --md-sys-color-primary: #BCC7DE;
  --md-sys-color-on-primary: #263143;
  --md-sys-color-on-primarye-dim: #545F73;
  --md-sys-color-primary-container: #3D475A;
  --md-sys-color-on-primary-container: #D8E3FA;
  --md-sys-color-secondary: #E3C19D;
  --md-sys-color-on-secondary: #422C0E;
  --md-sys-color-on-secondary-dim: #75593A;
  --md-sys-color-secondary-container: #5B4223;
  --md-sys-color-on-secondary-container: #FFDCB8;
  --md-sys-color-tertiary: #BBCBB9;
  --md-sys-color-on-tertiary: #273426;
  --md-sys-color-on-tertiary-dim: #546252;
  --md-sys-color-tertiary-container: #3D4A3B;
  --md-sys-color-on-tertiary-container: #D7E7D4;
  --md-sys-color-neutral: #DDC1AA;
  --md-sys-color-on-neutral: #402C1A;
  --md-sys-color-on-neutral-dim: #715A46;
  --md-sys-color-neutral-container: #58432F;
  --md-sys-color-on-neutral-container: #FADDC5;
  --md-sys-color-surface: #402C1A;
  --md-sys-color-on-surface: #FADDC5;
  --md-sys-color-on-surface-dim: #A68C76;
  --md-sys-color-surface-dim: #230F00;
  --md-sys-color-surface-bright: #493522;
  --md-sys-color-surface-container-lowest: #200800;
  --md-sys-color-surface-container-low: #2A1800;
  --md-sys-color-surface-container: #2E1C06;
  --md-sys-color-surface-container-high: #392614;
  --md-sys-color-surface-container-highest: #45311E;
  --md-sys-color-on-surface-variant: #DDC1AA;
  --md-sys-color-outline: #A68C76;
  --md-sys-color-outline-variant: #58432F;
  --md-sys-color-inverse-surface: #FADDC5;
  --md-sys-color-inverse-on-surface: #402C1A;
  --md-sys-color-inverse-primary: #545F73;
  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;
}

/* ── Auto Dark Mode (OS preference) ───────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light):not([data-theme="light"]) {
    color-scheme: dark;
    --md-sys-color-primary: #BCC7DE;
    --md-sys-color-on-primary: #263143;
    --md-sys-color-on-primarye-dim: #545F73;
    --md-sys-color-primary-container: #3D475A;
    --md-sys-color-on-primary-container: #D8E3FA;
    --md-sys-color-secondary: #E3C19D;
    --md-sys-color-on-secondary: #422C0E;
    --md-sys-color-on-secondary-dim: #75593A;
    --md-sys-color-secondary-container: #5B4223;
    --md-sys-color-on-secondary-container: #FFDCB8;
    --md-sys-color-tertiary: #BBCBB9;
    --md-sys-color-on-tertiary: #273426;
    --md-sys-color-on-tertiary-dim: #546252;
    --md-sys-color-tertiary-container: #3D4A3B;
    --md-sys-color-on-tertiary-container: #D7E7D4;
    --md-sys-color-neutral: #DDC1AA;
    --md-sys-color-on-neutral: #402C1A;
    --md-sys-color-on-neutral-dim: #715A46;
    --md-sys-color-neutral-container: #58432F;
    --md-sys-color-on-neutral-container: #FADDC5;
    --md-sys-color-surface: #402C1A;
    --md-sys-color-on-surface: #FADDC5;
    --md-sys-color-on-surface-dim: #A68C76;
    --md-sys-color-surface-dim: #230F00;
    --md-sys-color-surface-bright: #493522;
    --md-sys-color-surface-container-lowest: #200800;
    --md-sys-color-surface-container-low: #2A1800;
    --md-sys-color-surface-container: #2E1C06;
    --md-sys-color-surface-container-high: #392614;
    --md-sys-color-surface-container-highest: #45311E;
    --md-sys-color-on-surface-variant: #DDC1AA;
    --md-sys-color-outline: #A68C76;
    --md-sys-color-outline-variant: #58432F;
    --md-sys-color-inverse-surface: #FADDC5;
    --md-sys-color-inverse-on-surface: #402C1A;
    --md-sys-color-inverse-primary: #545F73;
    --md-sys-color-scrim: #000000;
    --md-sys-color-shadow: #000000;
  }
}

/* ── Stitch / MindStudio Aliases ──────────────────────────── */
:root {
  /* Colors — these resolve to the active theme's system tokens */
  --color-primary:             var(--md-sys-color-primary);
  --color-primary-dark:         var(--md-sys-color-on-primary-container);
  --color-secondary:            var(--md-sys-color-secondary);
  --color-background:           var(--md-sys-color-surface);
  --color-surface:              var(--md-sys-color-surface-container);
  --color-error:                #B3261E;
  --color-text-primary:         var(--md-sys-color-on-surface);
  --color-text-secondary:       var(--md-sys-color-on-surface-variant);
  --color-border:               var(--md-sys-color-outline-variant);

  /* Typography — shorthand aliases */
  --font-heading: Great Vibes;
  --font-body:    Great Vibes;
  --font-label:   Great Vibes;

  /* Spacing (8px base grid) */
  --spacing-xs:  4px;
  --spacing-sm:  8px;
  --spacing-md:  16px;
  --spacing-lg:  24px;
  --spacing-xl:  32px;
  --spacing-2xl: 48px;

  /* Shape */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  28px;
  --radius-full: 9999px;

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15);
  --shadow-2: 0 1px 2px rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15);
  --shadow-3: 0 4px 8px 3px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.3);
  --shadow-4: 0 6px 10px 4px rgba(0,0,0,0.15), 0 2px 3px rgba(0,0,0,0.3);
  --shadow-5: 0 8px 12px 6px rgba(0,0,0,0.15), 0 4px 4px rgba(0,0,0,0.3);
}

/* Surface containers — use for cards, sheets, dialogs */
.brand-surface {
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
}
.brand-surface-dim {
  background: var(--md-sys-color-surface-dim);
  color: var(--md-sys-color-on-surface);
}
.brand-surface-bright {
  background: var(--md-sys-color-surface-bright);
  color: var(--md-sys-color-on-surface);
}
.brand-surface-container-lowest {
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface);
}
.brand-surface-container-low {
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface);
}
.brand-surface-container {
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
}
.brand-surface-container-high {
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
}
.brand-surface-container-highest {
  background: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-on-surface);
}

.brand-bg-primary {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}
.brand-bg-primary-container {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}
.brand-bg-secondary {
  background: var(--md-sys-color-secondary);
  color: var(--md-sys-color-on-secondary);
}
.brand-bg-secondary-container {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.brand-bg-tertiary {
  background: var(--md-sys-color-tertiary);
  color: var(--md-sys-color-on-tertiary);
}
.brand-bg-tertiary-container {
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
}
.brand-bg-neutral {
  background: var(--md-sys-color-neutral);
  color: var(--md-sys-color-on-neutral);
}
.brand-bg-neutral-container {
  background: var(--md-sys-color-neutral-container);
  color: var(--md-sys-color-on-neutral-container);
}

.brand-bg-primary > .muted {
  color: var(--md-sys-color-on-bg-primary-dim);
}
.brand-bg-primary-container > .muted {
  color: var(--md-sys-color-on-bg-primary-variant-dim);
}
.brand-bg-secondary > .muted {
  color: var(--md-sys-color-on-bg-secondary-dim);
}
.brand-bg-secondary-container > .muted {
  color: var(--md-sys-color-on-bg-secondary-variant-dim);
}
.brand-bg-tertiary > .muted {
  color: var(--md-sys-color-on-bg-tertiary-dim);
}
.brand-bg-tertiary-container > .muted {
  color: var(--md-sys-color-on-bg-tertiary-variant-dim);
}
.brand-bg-neutral > .muted {
  color: var(--md-sys-color-on-bg-neutral-dim);
}
.brand-bg-neutral-container > .muted {
  color: var(--md-sys-color-on-bg-neutral-variant-dim);
}
.brand-surface > .muted {
  color: var(--md-sys-color-on-surface-dim);
}
.brand-surface-container > .muted {
  color: var(--md-sys-color-on-surface-variant-dim);
}

/* Text colors */
.brand-text-primary { color: var(--md-sys-color-primary); }
.brand-text-secondary { color: var(--md-sys-color-secondary); }
.brand-text-tertiary { color: var(--md-sys-color-tertiary); }
.brand-text-on-surface { color: var(--md-sys-color-on-surface); }
.brand-text-on-surface-variant { color: var(--md-sys-color-on-surface-variant); }

/* Typography classes */
.brand-display-large { font: var(--md-sys-typescale-display-large); }
.brand-display-medium { font: var(--md-sys-typescale-display-medium); }
.brand-display-small { font: var(--md-sys-typescale-display-small); }
.brand-headline-large { font: var(--md-sys-typescale-headline-large); }
.brand-headline-medium { font: var(--md-sys-typescale-headline-medium); }
.brand-headline-small { font: var(--md-sys-typescale-headline-small); }
.brand-title-large { font: var(--md-sys-typescale-title-large); }
.brand-title-medium { font: var(--md-sys-typescale-title-medium); }
.brand-title-small { font: var(--md-sys-typescale-title-small); }
.brand-body-large { font: var(--md-sys-typescale-body-large); }
.brand-body-medium { font: var(--md-sys-typescale-body-medium); }
.brand-body-small { font: var(--md-sys-typescale-body-small); }
.brand-label-large { font: var(--md-sys-typescale-label-large); }
.brand-label-medium { font: var(--md-sys-typescale-label-medium); }
.brand-label-small { font: var(--md-sys-typescale-label-small); }

/* Elevation */
.brand-elevation-1 { box-shadow: var(--shadow-1); }
.brand-elevation-2 { box-shadow: var(--shadow-2); }
.brand-elevation-3 { box-shadow: var(--shadow-3); }
.brand-elevation-4 { box-shadow: var(--shadow-4); }
.brand-elevation-5 { box-shadow: var(--shadow-5); }

/* SVG FILL colors */
.brand-fill-on-primary { fill: var(--md-sys-color-on-primary-container); }
.brand-fill-on-secondary { fill: var(--md-sys-color-on-secondary-container); }
.brand-fill-on-tertiary { fill: var(--md-sys-color-on-tertiary-container); }
.brand-fill-on-surface { fill: var(--md-sys-color-on-surface-container); }
.brand-fill-on-surface-variant { fill: var(--md-sys-color-on-surface-variant-container); }

/* Button */
.brand-btn-primary {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}
.brand-btn-primary:hover {
  background: var(--md-ref-palette-primary80);
color: var(--md-sys-color-{role})
}
.brand-btn-outline-primary {
  border-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-primary);
}
.brand-btn-outline-primary:hover {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}
.brand-btn-secondary {
  background: var(--md-sys-color-secondary);
  color: var(--md-sys-color-on-secondary);
}
.brand-btn-secondary:hover {
  background: var(--md-ref-palette-secondary80);
color: var(--md-sys-color-{role})
}
.brand-btn-outline-secondary {
  border-color: var(--md-sys-color-secondary);
  color: var(--md-sys-color-secondary);
}
.brand-btn-outline-secondary:hover {
  background: var(--md-sys-color-secondary);
  color: var(--md-sys-color-on-secondary);
}
.brand-btn-tertiary {
  background: var(--md-sys-color-tertiary);
  color: var(--md-sys-color-on-tertiary);
}
.brand-btn-tertiary:hover {
  background: var(--md-ref-palette-tertiary80);
color: var(--md-sys-color-{role})
}
.brand-btn-outline-tertiary {
  border-color: var(--md-sys-color-tertiary);
  color: var(--md-sys-color-tertiary);
}
.brand-btn-outline-tertiary:hover {
  background: var(--md-sys-color-tertiary);
  color: var(--md-sys-color-on-tertiary);
}
.brand-btn-neutral {
  background: var(--md-ref-palette-neutral80);
  color: var(--md-sys-color-on-neutral);
}
.brand-btn-neutral:hover {
  background: var(--md-ref-palette-neutral60);
color: var(--md-sys-color-neutral)
}
.brand-btn-outline-neutral {
  border-color: var(--md-ref-palette-neutral80);
  color: var(--md-ref-palette-neutral80);
}
.brand-btn-outline-neutral:hover {
  background: var(--md-ref-palette-neutral80);
  color: var(--md-sys-color-on-neutral);
}
/* Shape */
.brand-rounded-sm  { border-radius: var(--radius-sm); }
.brand-rounded-md  { border-radius: var(--radius-md); }
.brand-rounded-lg  { border-radius: var(--radius-lg); }
.brand-rounded-xl  { border-radius: var(--radius-xl); }
.brand-rounded-full { border-radius: var(--radius-full); }

/* Outlines & dividers */
.brand-outline       { border: 1px solid var(--md-sys-color-outline); }
.brand-outline-variant { border: 1px solid var(--md-sys-color-outline-variant); }
.brand-divider       { border-bottom: 1px solid var(--md-sys-color-outline-variant); }

/* Custom Fonts */
@font-face {
                font-family: 'Great Vibes';
                src: url('https://intouchsystems.com/fonts/bKpiPaIfr0W9x7MtCSHgog/Great Vibes');
                font-weight: normal;
                font-style: normal;
                font-display: swap;
            }
@font-face {
                font-family: 'Great Vibes';
                src: url('https://intouchsystems.com/fonts/bKpiPaIfr0W9x7MtCSHgog/Great Vibes');
                font-weight: normal;
                font-style: normal;
                font-display: swap;
            }
@font-face {
                font-family: 'Great Vibes';
                src: url('https://intouchsystems.com/fonts/bKpiPaIfr0W9x7MtCSHgog/Great Vibes');
                font-weight: normal;
                font-style: normal;
                font-display: swap;
            }

/* Custom CSS */