/* ------------------------------------------------------
   WHISKER HOLLOW — GLOBAL DESIGN SYSTEM TOKEN FILE
   
   Canonical Color Palette & UI Structure Guide
   Single source of truth for all design tokens.
   
   🎨 Color Palette Reference:
   - Harvest Orange (#DA7C47) - Primary Accent / CTAs
   - Saffron Dust (#F4A261) - Secondary Accent / Hovers
   - Mushroom Cream (#F6F2E9) - Main Background
   - Clay Beige (#E1D7C6) - Soft Contrast Background / Cards
   - Bark Brown (#4B2E2A) - Primary Dark Text
   - Cinnamon (#8B5A42) - Secondary / Muted Text (warm brown)
   - Walnut (#5D4037) - Deep warm accent brown
   - Caramel Tan (#C4956A) - Warm highlight brown
   - Moss Sage (#A3A380) - Soft Accent / In-card buttons
   - Burnt Rose (#C97A7E) - Callout / Links / CTAs
   
   🎨 Care Stat Colors (see Project Documents/VITAL_STATS.md):
   - Health: Meadow Sage (#7D9B76) — not UI moss
   - Happiness: Warm peach (#E6A57E)
   - Energy: Buttercup (#E2B84A)
   - Nutrition: Dusty Rose (#C97A7E)
   - Tame: Dusty Lilac (#9B8AA8)
   - Cleanliness: Clear blue (#7FAFC9)
   - Comfort: Soft Pink (#D4A5A5)
   - Enrichment: Soft Blue (#7E9BB8)
------------------------------------------------------- */

:root {
  /* ==================================================
     PRIMARY UI COLORS (Canonical)
     NOTE: Harvest Orange is for GLOBAL CTAs only (header, top actions)
     For in-card buttons, use Moss Sage or Bark Brown for contrast
  ================================================== */
  --wh-primary:        #DA7C47;   /* Harvest Orange - GLOBAL primary CTAs only */
  --wh-primary-hover:  #C56A3A;   /* 10-15% darker for hover states */
  --wh-primary-soft:   #F4A261;   /* Saffron Dust - Hovers, subtle accents, dividers */
  --wh-primary-dark:   #C56A3A;   /* Darker orange for use on warm backgrounds */

  /* ==================================================
     BACKGROUNDS (Canonical)
  ================================================== */
  --wh-bg:             #F6F2E9;   /* Mushroom Cream - Main page background */
  --wh-bg-soft:        #E1D7C6;   /* Clay Beige - Soft contrast background */
  --wh-bg-surface-dark: #D8CFC0;  /* Slightly darkened Clay Beige for depth */
  --wh-surface:        #F6F2E9;   /* Same as main bg for consistency */

  /* ==================================================
     CARDS & PANELS
  ================================================== */
  --wh-card:           #E1D7C6;   /* Clay Beige - Card backgrounds */
  --wh-card-alt:       #F6F2E9;   /* Mushroom Cream - Alternative card bg */
  --wh-card-hover:     #D8CFC0;   /* 10% darker Clay Beige for hover */
  --wh-border:         rgba(75, 46, 42, 0.15); /* Darkened Bark Brown 15% */
  --wh-border-strong:  rgba(75, 46, 42, 0.25); /* Darkened Bark Brown 25% */

  /* ==================================================
     TEXT COLORS (WCAG AA Compliant)
  ================================================== */
  --wh-text:           #4B2E2A;   /* Bark Brown - Primary text on light bg */
  --wh-text-body:      #5A3D36;   /* Slightly lighter Bark Brown for body */
  --wh-text-secondary: #8B5A42;   /* Cinnamon - warm brown secondary text */
  --wh-text-muted:     rgba(75, 46, 42, 0.7);  /* Bark Brown at 70% */
  --wh-text-disabled:  rgba(139, 90, 66, 0.5); /* Cinnamon at 50% */
  --wh-text-inverse:   #FFFFFF;   /* White for dark backgrounds */
  --wh-text-inverse-secondary: rgba(255, 255, 255, 0.8);
  --wh-text-inverse-muted: rgba(255, 255, 255, 0.6);
  --wh-text-link:      #C97A7E;   /* Burnt Rose for links */

  /* ==================================================
     SEMANTIC BUTTON TOKENS
     
     Light backgrounds (#D8CFC0 or lighter): Use warm accents
     Dark backgrounds (darker than #D8CFC0): Use dark contrast buttons
  ================================================== */
  
  /* btn-light / btn-accent - For LIGHT backgrounds */
  --wh-btn-light:        #DA7C47;   /* Harvest Orange */
  --wh-btn-light-hover:  #C56A3A;   /* 10-15% darker */
  --wh-btn-light-active: #D06835;   /* Deeper orange (stays warm, not muddy) */
  --wh-btn-light-text:   #FFFFFF;
  
  /* btn-secondary - warm neutral default */
  --wh-btn-secondary:        #F4A261; /* Saffron Dust */
  --wh-btn-secondary-hover:  #E18D53;
  --wh-btn-secondary-text:   #4B2E2A;
  /* btn-success - Moss Sage reserved for calm/success */
  --wh-btn-success:          #A3A380;
  --wh-btn-success-hover:    #8F8F70;
  --wh-btn-success-text:     #FFFFFF;
  
  /* btn-dark - For warm/medium backgrounds */
  --wh-btn-dark:         #4B2E2A;   /* Bark Brown - Maximum contrast */
  --wh-btn-dark-hover:   #3A2420;   /* 10-15% darker */
  --wh-btn-dark-text:    #FFFFFF;
  
  /* btn-callout - Burnt Rose for attention-grabbing CTAs */
  --wh-btn-callout:      #C97A7E;   /* Burnt Rose */
  --wh-btn-callout-hover: #B56B6F;  /* 10-15% darker */
  --wh-btn-callout-text: #FFFFFF;
  
  /* btn-disabled - Works on any background */
  --wh-btn-disabled-bg:   rgba(123, 94, 82, 0.35);
  --wh-btn-disabled-text: rgba(123, 94, 82, 0.5);

  /* ==================================================
     IN-CARD BUTTON COLORS (Legacy aliases)
  ================================================== */
  --wh-sage:           #A3A380;   /* Moss Sage - PRIMARY in-card button color */
  --wh-sage-hover:     #8F8F70;   /* Darker sage for hover */
  --wh-sage-soft:      #C3C6A4;
  --wh-accent:         #C97A7E;   /* Burnt Rose - Callout/accent buttons */
  --wh-accent-hover:   #B56B6F;   /* Darker rose for hover */
  --wh-accent-soft:    #E5A5A8;

  /* ==================================================
     SHADOWS — Minimal, warm-tinted
  ================================================== */
  --wh-shadow-sm:      0 1px 2px rgba(75, 46, 42, 0.06);
  --wh-shadow-md:      0 2px 4px rgba(75, 46, 42, 0.08);
  --wh-shadow-lg:      0 4px 8px rgba(75, 46, 42, 0.10);
  --wh-shadow-rgb:     75, 46, 42;

  /* ==================================================
     STATE COLORS
  ================================================== */
  --wh-success:        #A3A380;   /* Moss Sage for success */
  --wh-error:          #C97A7E;   /* Burnt Rose for errors */
  --wh-warn:           #F4A261;   /* Saffron Dust for warnings */

  /* ==================================================
     PROGRESS BARS & UI METRICS
  ================================================== */
  --wh-meter-track:    #D8CFC0;   /* Slightly darker than card bg */
  --wh-meter-green:    var(--wh-sage);
  --wh-meter-orange:   var(--wh-primary);
  --wh-meter-red:      var(--wh-accent);
  
  /* Care Stats - distinct colors for each stat */
  --wh-status-health:      #7D9B76;   /* Meadow Sage - soft green for life/vitality */
  --wh-status-health-hover: #6B8A66;  /* Darker Meadow Sage for hover states */
  --wh-status-happiness:   #E08045;   /* Warm orange — mood / affect (semantic: orange = happiness) */
  --wh-status-happiness-hover: #CC6F38;
  --wh-status-energy:      #E2B84A;   /* Buttercup — stamina / energy */
  --wh-status-energy-hover: #C99F3D;
  --wh-status-nutrition:   #B87D4A;   /* Copper — diet / sustenance (not danger red) */
  --wh-status-nutrition-hover: #A66D42;
  /** Low vitals — reserved for deficits only (bars & alerts) */
  --wh-status-deficit:     #B56B6F;
  --wh-status-deficit-hover: #A35A5E;
  --wh-status-tame:        #9B8AA8;   /* Dusty Lilac - soft lavender for trust */
  --wh-status-tame-hover:  #857592;   /* Darker Dusty Lilac for hover states */
  --wh-status-cleanliness: #7FAFC9;   /* Clear blue — hygiene / water / clarity */
  --wh-status-cleanliness-hover: #6A9BB8; /* Deeper blue for hover */
  
  /* Enclosure Stats */
  --wh-status-comfort:     #D4A5A5;   /* Soft Pink - cozy warmth */
  --wh-status-enrichment:  #7E9BB8;   /* Soft Blue - playful enrichment */

  /* Show / evaluation (distinct from care vitals: no green/blue/peach/yellow-utility/rose/lilac-tame) */
  --wh-eval-conformation:      #C9A24A;   /* Muted antique gold — type / standard */
  --wh-eval-conformation-bar:  #B89642;  /* Softer fill — avoids competing with energy buttercup */
  --wh-eval-coat:              #C48B52;  /* Copper — coat texture & richness */
  --wh-eval-coat-bar:          #B87D48;  /* Slightly deeper bar fill */
  --wh-eval-temperament:       #8F7FA3;  /* Dusty lavender — behavior / handling */
  --wh-eval-fitness:           #E2B84A;  /* Buttercup — performance (energy family) */

  /* ==================================================
     BORDER RADIUS — Medium-rounded (rounded-xl/2xl)
  ================================================== */
  --wh-radius-base:    0.75rem;   /* 12px - rounded-xl equivalent */
  --wh-radius-large:   1rem;      /* 16px - rounded-2xl equivalent */
  --wh-radius-medium:  0.625rem;  /* 10px */
  --wh-radius-small:   0.5rem;    /* 8px */

  /* ==================================================
     SPACING — Comfortable (p-4 to p-6, gap-4 to gap-6)
  ================================================== */
  --wh-spacing-card:   1.5rem;    /* 24px - p-6 */
  --wh-spacing-section: 1.5rem;   /* 24px - gap-6 */

  /* ==================================================
     CANONICAL COLOR NAMES (Direct access)
  ================================================== */
  --wh-harvest-orange: #DA7C47;
  --wh-saffron-dust:   #F4A261;
  --wh-mushroom-cream: #F6F2E9;
  --wh-clay-beige:     #E1D7C6;
  --wh-bark-brown:     #4B2E2A;
  --wh-cinnamon:       #8B5A42;   /* Warm brown - replaces old toasted almond */
  --wh-walnut:         #5D4037;   /* Deep warm accent brown */
  --wh-caramel-tan:    #C4956A;   /* Warm highlight brown */
  --wh-toasted-almond: #8B5A42;   /* Updated to Cinnamon (backwards compat) */
  --wh-moss-sage:      #A3A380;
  --wh-burnt-rose:     #C97A7E;

  /* ==================================================
     PHENOTYPE / COAT COLOR PALETTE
     For phenotype badges, filters, genetics visualizer, profile color chips.
     Three layers: (1) base phenotype color (below) (2) pattern overlay (white)
     (3) coat type highlight (longhair/rex/satin). Matches sprite stack order.
  ================================================== */
  /* Agouti family */
  --wh-phenotype-golden:        #C58B3A;
  --wh-phenotype-rust:          #B65A2E;
  --wh-phenotype-cinnamon:      #B07240;
  --wh-phenotype-yellow:        #D6A12A;
  --wh-phenotype-honey:         #E2A552;
  --wh-phenotype-silver-grey:   #A7A9B1;
  --wh-phenotype-dark-grey:     #6F707A;
  --wh-phenotype-light-grey:    #B8B9B3;
  --wh-phenotype-extreme-dilute: #D8D5C8;
  --wh-phenotype-beige:         #BBA891;
  /* Self family */
  --wh-phenotype-black:         #1B1B1D;
  --wh-phenotype-chocolate:     #4A2E2A;
  --wh-phenotype-dove:          #8A7A76;
  --wh-phenotype-blue:          #5F6775;
  --wh-phenotype-lilac:         #B9A6B3;
  --wh-phenotype-champagne:     #E7D2B8;
  /* Cream family */
  --wh-phenotype-cream:         #E6C89C;
  --wh-phenotype-red-eyed-cream: #E9C0A0;
  --wh-phenotype-pale-eared-cream: #F0D8B8;
  --wh-phenotype-ivory:         #ECE5D8;
  --wh-phenotype-black-eyed-ivory: #E2DED3;
  /* Umbrous / shaded */
  --wh-phenotype-sable:         #4A3329;
  --wh-phenotype-silver-sable:  #6A5E5A;
  --wh-phenotype-mink:          #6B4A3B;
  --wh-phenotype-copper:        #B15A2F;
  --wh-phenotype-smoke-pearl:   #C4C0B5;
  /* White variants */
  --wh-phenotype-dark-eared-white: #F4F4F2;
  --wh-phenotype-flesh-eared-white: #F7EFEA;
  --wh-phenotype-black-eyed-white: #F0EEE8;
  /* Pattern overlays */
  --wh-phenotype-pattern-white: #FFFFFF;
  --wh-phenotype-roan:          #F3F3F3;
  /* Coat type UI accents */
  --wh-coat-longhair:           #A57A50;
  --wh-coat-rex:                #8A6A55;
  --wh-coat-satin:              #FFD27A;
  --wh-coat-hairless:           #F3C4B5;
  /* Genetics visualizer family tints */
  --wh-genetics-agouti:         #C58B3A;
  --wh-genetics-self:           #3E2A27;
  --wh-genetics-cream:          #E6C89C;
  --wh-genetics-grey:           #8A8E97;

  /* Legacy semantic mappings */
  --wh-main-bg:        var(--wh-bg);
  --wh-soft-contrast-bg: var(--wh-bg-soft);
  --wh-text-dark:      var(--wh-text);
  --wh-text-light:     var(--wh-text-secondary);
  --wh-primary-accent: var(--wh-primary);
  --wh-secondary-accent: var(--wh-primary-soft);
  --wh-soft-accent:    var(--wh-sage);
  --wh-callout-link:   var(--wh-accent);
}

/* ------------------------------------------------------
   GLOBAL ELEMENT APPLICATION
   Per design guide: Soft neutral background, minimal shadows
------------------------------------------------------- */

body {
  background-color: var(--wh-mushroom-cream);
  color: var(--wh-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==================================================
   UNIVERSAL CARD STYLE
   bg-clay-beige rounded-xl shadow-sm p-4 border
================================================== */
.wh-card,
.game-card {
  background-color: var(--wh-clay-beige);
  border-radius: var(--wh-radius-base);
  box-shadow: var(--wh-shadow-sm);
  padding: 1rem;
  border: 1px solid var(--wh-border);
}

.wh-card:hover,
.game-card:hover {
  box-shadow: var(--wh-shadow-md);
}

/* Card text styling - WCAG AA compliant */
.wh-card-title {
  color: var(--wh-text);
  font-weight: 600;
}

.wh-card-body {
  color: var(--wh-text-secondary);
  font-size: 0.875rem;
}

/* ==================================================
   BUTTON SYSTEM - Context-Aware Color Logic
   
   LIGHT backgrounds (Mushroom Cream, Clay Beige): 
     Use btn-light (Harvest Orange) or btn-secondary (Moss Sage)
   
   DARK/MEDIUM backgrounds:
     Use btn-dark (Bark Brown)
   
   CALLOUT (any background):
     Use btn-callout (Burnt Rose) for attention-grabbing CTAs
================================================== */
button,
.btn {
  transition: all 0.15s ease;
  cursor: pointer;
}

/* Universal button focus state - consistent across all variants */
button:focus-visible,
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--wh-moss-sage);
}

/* Universal button active state - subtle press effect */
button:active:not(:disabled),
.btn:active:not(:disabled) {
  transform: translateY(1px);
}

/* btn-light / btn-primary - Harvest Orange for LIGHT backgrounds */
.btn-primary,
.btn-light {
  background-color: var(--wh-btn-light);
  color: var(--wh-btn-light-text);
  border: none;
  border-radius: var(--wh-radius-base);
  padding: 0.625rem 1.25rem;
  font-weight: 600;
  box-shadow: var(--wh-shadow-sm);
}

.btn-primary:hover,
.btn-light:hover {
  background-color: var(--wh-btn-light-hover);
}

.btn-primary:focus-visible,
.btn-light:focus-visible {
  box-shadow: 0 0 0 3px var(--wh-moss-sage);
}

.btn-primary:active,
.btn-light:active {
  background-color: var(--wh-btn-light-active);
}

/* btn-secondary - Moss Sage for in-card use on warm backgrounds */
.btn-secondary {
  background-color: var(--wh-btn-secondary);
  color: var(--wh-btn-secondary-text);
  border: none;
  border-radius: var(--wh-radius-base);
  padding: 0.625rem 1.25rem;
  font-weight: 600;
  box-shadow: var(--wh-shadow-sm);
}

.btn-secondary:hover {
  background-color: var(--wh-btn-secondary-hover);
}

.btn-secondary:focus-visible {
  box-shadow: 0 0 0 3px var(--wh-moss-sage);
}

.btn-secondary:active {
  background-color: #D47E45;
}

/* btn-success - Moss Sage for positive/calm confirmations */
.btn-success {
  background-color: var(--wh-btn-success);
  color: var(--wh-btn-success-text);
  border: none;
  border-radius: var(--wh-radius-base);
  padding: 0.625rem 1.25rem;
  font-weight: 600;
  box-shadow: var(--wh-shadow-sm);
}

.btn-success:hover {
  background-color: var(--wh-btn-success-hover);
}

.btn-success:focus-visible {
  box-shadow: 0 0 0 3px var(--wh-bark-brown);
}

.btn-success:active {
  background-color: #7F7F68;
}

/* btn-dark - Bark Brown for maximum contrast on warm cards */
.btn-dark {
  background-color: var(--wh-btn-dark);
  color: var(--wh-btn-dark-text);
  border: none;
  border-radius: var(--wh-radius-base);
  padding: 0.625rem 1.25rem;
  font-weight: 600;
  box-shadow: var(--wh-shadow-sm);
}

.btn-dark:hover {
  background-color: var(--wh-btn-dark-hover);
}

.btn-dark:focus-visible {
  box-shadow: 0 0 0 3px var(--wh-moss-sage);
}

.btn-dark:active {
  background-color: #2E1C18;
}

/* btn-callout - Burnt Rose (light) / Warm Coral gradient (dark) for attention-grabbing CTAs */
.btn-callout,
.btn-accent {
  background-color: var(--wh-btn-callout);
  color: var(--wh-btn-callout-text);
  border: none;
  border-radius: var(--wh-radius-base);
  padding: 0.625rem 1.25rem;
  font-weight: 600;
  box-shadow: var(--wh-shadow-sm);
}

.dark .btn-callout,
.dark .btn-accent,
[data-theme="dark"] .btn-callout,
[data-theme="dark"] .btn-accent {
  background: linear-gradient(to bottom, #E27373, #D85B5B);
  border: 1px solid rgba(226, 115, 115, 0.3);
}

.dark .btn-callout:hover,
.dark .btn-accent:hover,
[data-theme="dark"] .btn-callout:hover,
[data-theme="dark"] .btn-accent:hover {
  background: linear-gradient(to bottom, #E88080, #E06868);
}

.btn-callout:hover,
.btn-accent:hover {
  background-color: var(--wh-btn-callout-hover);
}

.btn-callout:focus-visible,
.btn-accent:focus-visible {
  box-shadow: 0 0 0 3px var(--wh-moss-sage);
}

.btn-callout:active,
.btn-accent:active {
  background-color: #A55D61;
}

/* btn-outline - For secondary actions */
.btn-outline {
  border: 1px solid var(--wh-border-strong);
  background: var(--wh-mushroom-cream);
  color: var(--wh-text);
  border-radius: var(--wh-radius-base);
  padding: 0.625rem 1.25rem;
  font-weight: 600;
}

.btn-outline:hover {
  background: var(--wh-clay-beige);
}

.btn-outline:focus-visible {
  box-shadow: 0 0 0 3px var(--wh-moss-sage);
}

.btn-outline:active {
  background: #D8CFC0;
}

/* btn-disabled - Consistent disabled state */
.btn-disabled,
button:disabled,
.btn:disabled {
  background-color: var(--wh-btn-disabled-bg);
  color: var(--wh-btn-disabled-text);
  cursor: not-allowed;
  box-shadow: none;
}

.btn-disabled:hover,
button:disabled:hover,
.btn:disabled:hover {
  background-color: var(--wh-btn-disabled-bg);
}

/* Utility for subtle muted surfaces */
.surface {
  background-color: var(--wh-surface);
}

/* ==================================================
   DARK MODE SUPPORT
   
   4-step surface scale for clear hierarchy.
   Stronger text contrast (avoid opacity-based muted).
   Accent colors unchanged for brand recognition.
================================================== */

.dark,
[data-theme="dark"] {
  /* Surface ladder - clear separation between layers */
  --wh-bg: #1A120E;              /* Page background - darkest */
  --wh-bg-shell: #241913;        /* Main container - panel on background */
  --wh-bg-panel: #2E2018;        /* Cards / panels */
  --wh-bg-elevated: #35241B;     /* Raised / hamster cards */
  --wh-bg-soft: #241913;
  --wh-surface: #2E2018;
  --wh-bg-surface-dark: #1A120E;
  
  /* Topbar */
  --wh-topbar-bg: #140D09;
  --wh-topbar-border: #3A2A20;
  
  /* Room containers - darker than hamster cards */
  --wh-room-bg: #2A1D16;
  --wh-room-border: #3F2C21;
  
  /* Hamster cards - primary content, lighter than room */
  --wh-card: #2E2018;
  --wh-card-alt: #241913;
  --wh-card-hover: #3E2A20;
  --wh-card-dark: #35241B;
  --wh-card-dark-border: #4A3427;
  --wh-card-dark-text: #F3E6D6;
  --wh-card-dark-hover: #3E2A20;
  
  /* Borders - consistent */
  --wh-border: #3A2A20;
  --wh-border-strong: #4A3427;
  --wh-border-soft: #3A2A20;
  
  /* Text - improved contrast tiers */
  --wh-text: #F3E6D6;            /* Primary */
  --wh-text-body: #F3E6D6;
  --wh-text-secondary: #C9B7A3;  /* Secondary */
  --wh-text-muted: #8F7B68;      /* Muted */
  --wh-text-soft: #8F7B68;      /* Soft */
  --wh-text-disabled: #8F7B68;  /* Disabled */
  --wh-text-inverse: #1b1613;
  
  /* Accents - punchier pink for dark mode (higher saturation) */
  --wh-primary: #DA7C47;
  --wh-primary-hover: #E68957;
  --wh-primary-soft: #F4A261;
  --wh-accent: #D48387;
  --wh-accent-hover: #E09094;
  --wh-sage: #A3A380;
  --wh-sage-hover: #8F8F70;
  
  /* Status colors — distinct per vital (match light-mode separation; see VITAL_STATS.md) */
  --wh-status-health: #7FBF7F;
  --wh-status-health-hover: #6FAA6F;
  --wh-status-happiness: #E88855;
  --wh-status-happiness-hover: #D67845;
  --wh-status-energy: #E0C852;
  --wh-status-energy-hover: #C9B244;
  --wh-status-nutrition: #C48A55;
  --wh-status-nutrition-hover: #B27A48;
  --wh-status-deficit: #D48387;
  --wh-status-deficit-hover: #C07074;
  --wh-status-cleanliness: #7AA9C4;
  --wh-status-cleanliness-hover: #6699B5;
  
  /* Legacy aliases — same as wh-status-* for bars and utilities */
  --stat-health: #7FBF7F;
  --stat-happiness: #E88855;
  --stat-energy: #E0C852;
  --stat-nutrition: #C48A55;
  --stat-cleanliness: #7AA9C4;
  --wh-status-tame: #9B8AA8;
  --wh-status-tame-hover: #857592;
  --wh-status-comfort: #D4A5A5;
  --wh-status-comfort-hover: #B89090;
  --wh-status-enrichment: #7E9BB8;
  --wh-status-enrichment-hover: #6B87A0;

  /* Evaluation — lifted slightly on dark panels; gold/copper stay warm */
  --wh-eval-conformation:      #D4B45E;
  --wh-eval-conformation-bar: #B89A48;
  --wh-eval-coat:              #D49A62;
  --wh-eval-coat-bar:          #C48B52;
  --wh-eval-temperament:       #B5A4C4;
  --wh-eval-fitness:           #E0C852;
  
  /* Buttons */
  --wh-btn-light: #DA7C47;
  --wh-btn-light-hover: #E68957;
  --wh-btn-light-active: #C86C3B;
  --wh-btn-secondary: #F4A261;
  --wh-btn-secondary-hover: #E18D53;
  --wh-btn-secondary-text: #4B2E2A;
  --wh-btn-dark: #4B2E2A;
  --wh-btn-dark-hover: #3A2420;
  --wh-btn-dark-text: #FFFFFF;
  --wh-btn-callout: #E27373;
  --wh-btn-callout-hover: #E88080;
  
  /* Shadows */
  --wh-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --wh-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.4);
  --wh-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.28);
  
  /* Meter track */
  --wh-meter-track: #3A2A20;
  
  /* Empty slot tiles - muted, not brighter than hamster cards */
  --wh-empty-slot-bg: #2C2018;
  --wh-empty-slot-border: #3C2A20;
  --wh-empty-slot-icon: #8A7463;
  
  /* Sidebar - neutral brown, not pink/red saturated */
  --wh-sidebar-panel: #2B1D17;
  --wh-sidebar-attention-accent: #D46A6A;
  
  /* Footer */
  --wh-footer-bg: #1F1611;
  --wh-footer-divider: #3A2A20;
  
  /* Canonical / Tailwind mapping */
  --wh-mushroom-cream: #1A120E;
  --wh-clay-beige: #241913;
  --mushroom-cream: #1A120E;
  --clay-beige: #241913;
  --bark-brown: #F3E6D6;
  --cinnamon: #C9B7A3;
  --harvest-orange: #DA7C47;
  --moss-sage: #A3A380;
  --burnt-rose: #D48387;
  
  /* Shadcn */
  --background: #1A120E;
  --foreground: #F3E6D6;
  --card: #2E2018;
  --card-foreground: #F3E6D6;
  --popover: #2E2018;
  --popover-foreground: #F3E6D6;
  --primary: #DA7C47;
  --secondary: #A3A380;
  --muted: #241913;
  --muted-foreground: #8F7B68;
  --accent: #35241B;
  --accent-foreground: #F3E6D6;
  --destructive: #C97A7E;
  --border: #4A3427;
  --input: #4A3427;
  --ring: #A3A380;
}

/* Force light mode when .light class is present */
.light {
  /* Reset to light mode values explicitly */
  --wh-bg: #F6F2E9;
  --wh-bg-soft: #E1D7C6;
  --wh-card: #E1D7C6;
  --wh-text: #4B2E2A;
  --mushroom-cream: #F6F2E9;
  --clay-beige: #E1D7C6;
  --bark-brown: #4B2E2A;
}

/* Dark mode body styling */
.dark body,
body.dark {
  background-color: var(--wh-bg);
  color: var(--wh-text);
}

/* Reduced motion support - system preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================
   SHADCN/UI COMPATIBILITY MAPPINGS
   These map Whisker Hollow palette to shadcn tokens
   ============================================ */
:root {
  /* Direct color values for Tailwind classes */
  --harvest-orange: #DA7C47;
  --saffron-dust: #F4A261;
  --mushroom-cream: #F6F2E9;
  --clay-beige: #E1D7C6;
  --bark-brown: #4B2E2A;
  --cinnamon: #8B5A42;
  --walnut: #5D4037;
  --caramel-tan: #C4956A;
  --toasted-almond: #8B5A42;   /* Updated to warmer brown */
  --moss-sage: #A3A380;
  --burnt-rose: #C97A7E;
  
  /* Stat Colors */
  --stat-health: #7D9B76;
  --stat-health-hover: #6B8A66;
  --stat-happiness: #E08045;
  --stat-happiness-hover: #CC6F38;
  --stat-energy: #E2B84A;
  --stat-energy-hover: #C99F3D;
  --stat-nutrition: #B87D4A;
  --stat-nutrition-hover: #A66D42;
  --wh-status-deficit: #B56B6F;
  --wh-status-deficit-hover: #A35A5E;
  --stat-tame: #9B8AA8;
  --stat-tame-hover: #857592;
  --stat-cleanliness: #7FAFC9;
  --stat-cleanliness-hover: #6A9BB8;
  --stat-comfort: #D4A5A5;
  --stat-comfort-hover: #B89090;
  --stat-enrichment: #7E9BB8;
  --stat-enrichment-hover: #6B87A0;

  --wh-eval-conformation:      #C9A24A;
  --wh-eval-conformation-bar:  #B89642;
  --wh-eval-coat:              #C48B52;
  --wh-eval-coat-bar:          #B87D48;
  --wh-eval-temperament:       #8F7FA3;
  --wh-eval-fitness:           #E2B84A;

  /* Shadcn semantic tokens - mapped to Whisker Hollow palette */
  --background: #F6F2E9;           /* Mushroom Cream */
  --foreground: #4B2E2A;           /* Bark Brown */
  --card: #E1D7C6;                 /* Clay Beige */
  --card-foreground: #4B2E2A;      /* Bark Brown */
  --popover: #E1D7C6;              /* Clay Beige for dropdowns/menus */
  --popover-foreground: #4B2E2A;   /* Bark Brown */
  --primary: #DA7C47;              /* Harvest Orange */
  --primary-foreground: #FFFFFF;
  --secondary: #A3A380;            /* Moss Sage */
  --secondary-foreground: #FFFFFF;
  --muted: #E1D7C6;                /* Clay Beige */
  --muted-foreground: #8B5A42;     /* Cinnamon - warm brown */
  --accent: #D8CFC0;               /* Darker Clay Beige for hover states */
  --accent-foreground: #4B2E2A;    /* Bark Brown */
  --destructive: #C97A7E;          /* Burnt Rose */
  --destructive-foreground: #FFFFFF;
  --border: rgba(75, 46, 42, 0.15);  /* Darkened Bark Brown */
  --input: rgba(75, 46, 42, 0.15);   /* Darkened Bark Brown */
  --ring: #A3A380;                   /* Moss Sage for focus rings */
  --radius: 0.75rem;
  
  /* Additional semantic tokens */
  --callout: #C97A7E;              /* Burnt Rose */
  --callout-foreground: #FFFFFF;
  --link: #C97A7E;                 /* Burnt Rose */
  --link-hover: #B56B6F;           /* Darker Burnt Rose */
}

/* ============================================
   ESSENTIAL LAYOUT UTILITIES
   ============================================ */
.responsive-container {
  max-width: 68.75rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px) {
  .responsive-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .responsive-container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Responsive Grids */
.responsive-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) {
  .responsive-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .responsive-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1280px) {
  .responsive-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.responsive-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 768px) {
  .responsive-grid-2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

.responsive-grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 768px) {
  .responsive-grid-3 {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}
@media (min-width: 1280px) {
  .responsive-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==================================================
   TYPOGRAPHY RULES (Per Design Guide)
   - Headings: Bark Brown, semi-bold/bold, tracking increased
   - Body: Toasted Almond, 14-15px
   - Small labels: text-xs, opacity-80
================================================== */

/* H1 - Page Titles */
.wh-h1,
h1 {
  color: var(--wh-bark-brown);
  font-weight: 700;
  letter-spacing: 0.025em;
  font-size: 1.875rem;
  line-height: 1.2;
  margin-bottom: 0.5rem;
}
@media (min-width: 768px) {
  .wh-h1, h1 {
    font-size: 2.25rem;
  }
}

/* H2 - Section Titles */
.wh-h2,
h2 {
  color: var(--wh-bark-brown);
  font-weight: 600;
  letter-spacing: 0.015em;
  font-size: 1.5rem;
  line-height: 1.3;
}

/* H3 - Card/Panel Titles */
.wh-h3,
h3 {
  color: var(--wh-bark-brown);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.4;
}

/* Body Text */
.wh-body {
  color: var(--wh-toasted-almond);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* Small Labels / Stats */
.wh-label {
  color: var(--wh-toasted-almond);
  font-size: 0.75rem;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Responsive Typography */
.responsive-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--wh-text);
  letter-spacing: 0.015em;
}
@media (min-width: 640px) {
  .responsive-title {
    font-size: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .responsive-title {
    font-size: 1.875rem;
  }
}

.responsive-card {
  padding: 1rem;
}
@media (min-width: 640px) {
  .responsive-card {
    padding: 1.5rem;
  }
}

/* Responsive Buttons */
.responsive-button {
  width: 100%;
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
}
@media (min-width: 640px) {
  .responsive-button {
    width: auto;
    font-size: 1rem;
    padding: 0.5rem 1rem;
  }
}

/* ============================================
   FORM & INPUT STYLES
   ============================================ */
.wh-input,
.wh-select {
  width: 100%;
  border: 1px solid var(--wh-border);
  border-radius: 0.5rem;
  padding: 0.5rem 0.625rem;
  background: #fff;
  color: var(--wh-text);
}
.wh-input:focus,
.wh-select:focus {
  outline: 2px solid var(--wh-primary);
  outline-offset: 1px;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Text Colors */
.text-harvest { color: var(--wh-harvest-orange); }
.text-saffron { color: var(--wh-saffron-dust); }
.text-bark { color: var(--wh-bark-brown); }
.text-cinnamon { color: var(--wh-cinnamon); }
.text-walnut { color: var(--wh-walnut); }
.text-caramel { color: var(--wh-caramel-tan); }
.text-toasted { color: var(--wh-toasted-almond); }
.text-sage { color: var(--wh-moss-sage); }
.text-rose { color: var(--wh-burnt-rose); }
.text-link { color: var(--wh-burnt-rose); }
.text-muted { color: var(--wh-text-muted); }

/* Stat Colors (text) */
.text-stat-health { color: var(--wh-status-health); }
.text-stat-happiness { color: var(--wh-status-happiness); }
.text-stat-energy { color: var(--wh-status-energy); }
.text-stat-nutrition { color: var(--wh-status-nutrition); }
.text-stat-tame { color: var(--wh-status-tame); }
.text-stat-cleanliness { color: var(--wh-status-cleanliness); }
.text-stat-comfort { color: var(--wh-status-comfort); }
.text-stat-enrichment { color: var(--wh-status-enrichment); }
.text-stat-conformation { color: var(--wh-eval-conformation); }
.text-stat-coat { color: var(--wh-eval-coat); }
.text-stat-temperament { color: var(--wh-eval-temperament); }
.text-stat-fitness { color: var(--wh-eval-fitness); }

/* Background Colors */
.bg-mushroom { background-color: var(--wh-mushroom-cream); }
.bg-clay { background-color: var(--wh-clay-beige); }
.bg-harvest { background-color: var(--wh-harvest-orange); }
.bg-saffron { background-color: var(--wh-saffron-dust); }
.bg-sage { background-color: var(--wh-moss-sage); }
.bg-rose { background-color: var(--wh-burnt-rose); }
.bg-cinnamon { background-color: var(--wh-cinnamon); }
.bg-walnut { background-color: var(--wh-walnut); }
.bg-caramel { background-color: var(--wh-caramel-tan); }

/* Stat Background Colors */
.bg-stat-health { background-color: var(--wh-status-health); }
.bg-stat-happiness { background-color: var(--wh-status-happiness); }
.bg-stat-energy { background-color: var(--wh-status-energy); }
.bg-stat-nutrition { background-color: var(--wh-status-nutrition); }
.bg-stat-tame { background-color: var(--wh-status-tame); }
.bg-stat-cleanliness { background-color: var(--wh-status-cleanliness); }
.bg-stat-comfort { background-color: var(--wh-status-comfort); }
.bg-stat-enrichment { background-color: var(--wh-status-enrichment); }
.bg-stat-conformation { background-color: var(--wh-eval-conformation); }
.bg-stat-coat { background-color: var(--wh-eval-coat); }
.bg-stat-temperament { background-color: var(--wh-eval-temperament); }
.bg-stat-fitness { background-color: var(--wh-eval-fitness); }

/* Border Colors */
.border-clay { border-color: var(--wh-clay-beige); }
.border-bark { border-color: var(--wh-border-strong); }

/* Pill/Chip helpers */
.pill-success {
  background-color: var(--wh-status-health);
  color: var(--wh-btn-success-text);
  border-radius: 9999px;
  padding: 0.15rem 0.65rem;
}
.pill-care {
  background-color: var(--wh-status-happiness);
  color: #fff;
  border-radius: 9999px;
  padding: 0.15rem 0.65rem;
}
.pill-energy {
  background-color: var(--wh-status-energy);
  color: var(--wh-bark-brown);
  border-radius: 9999px;
  padding: 0.15rem 0.65rem;
}
.pill-neutral {
  background-color: var(--wh-clay-beige);
  color: var(--wh-bark-brown);
  border-radius: 9999px;
  padding: 0.15rem 0.65rem;
}

/* Link styling */
a.wh-link,
.wh-link {
  color: var(--wh-burnt-rose);
  text-decoration: none;
  transition: color 150ms ease;
}

a.wh-link:hover,
.wh-link:hover {
  color: var(--link-hover);
}

/* Cozy transition helpers */
.transition-cozy {
  transition: all 200ms ease-in-out;
}
.hover\:scale-cozy-hover:hover {
  transform: scale(1.01);
}
.rounded-cozy {
  border-radius: var(--wh-radius-base);
}

/* ==================================================
   TAB COMPONENT STYLING
   ==================================================
   
   Ensures tabs have readable text colors by default.
   Inactive tabs use dark text (#4B2E2A / Bark Brown) for
   readability on light backgrounds. Active tabs can override
   with explicit text color classes.
   
   IMPORTANT: Do not use inline styles for tab text colors.
   Use className with Tailwind classes instead to avoid conflicts.
*/

/* Ensure tabs have readable dark text by default */
[role="tablist"] button[role="tab"]:not([data-state="active"]),
button[role="tab"]:not([data-state="active"]) {
  color: #4B2E2A !important;
}

/* Ensure active tabs can still use their specified colors */
[role="tablist"] button[role="tab"][data-state="active"][class*="text-white"],
button[role="tab"][data-state="active"][class*="text-white"] {
  color: white !important;
}

/* Fix tutorial progress "Go to Step" button text color */
button.tutorial-go-to-step,
button.tutorial-go-to-step span,
button.tutorial-go-to-step svg {
  color: #4B2E2A !important;
}

button.tutorial-go-to-step:hover span,
button.tutorial-go-to-step:hover svg {
  color: white !important;
}