// ==========================================================================
// CAMP2GETHER THEME SYSTEM
// ==========================================================================
// All color decisions live here. design-tokens.css owns structure only.
//
// Themes:
//   body / body.theme-light   — Warm Neutral (default, linen)
//   body.theme-dark            — Warm Dark (cocoa/charcoal)
//   body.theme-auto            — Follows system preference
//   body.theme-spring          — Leaf green + apricot + lime
//   body.theme-summer          — Terracotta + teal + gold (= default palette)
//   body.theme-autumn          — Rust + sage + amber
//   body.theme-winter          — Steel blue + ice + silver
//
// Shadow tokens use the current theme's shadow color set via
// --c2g-shadow-color so they adapt automatically.
// ==========================================================================

// --------------------------------------------------------------------------
// SHARED SHADOW HELPERS
// Applied on top of any theme block that sets --c2g-shadow-color
// --------------------------------------------------------------------------
%shadows {
  --c2g-shadow-sm: 0 1px 3px  var(--c2g-shadow-color);
  --c2g-shadow-md: 0 4px 8px  var(--c2g-shadow-color);
  --c2g-shadow-lg: 0 10px 20px var(--c2g-shadow-color);
  --c2g-shadow-xl: 0 20px 40px var(--c2g-shadow-color);
}

// ==========================================================================
// LIGHT THEME — Warm Neutral (Linen)
// Default palette: Terracotta primary, Teal secondary
// ==========================================================================
body,
body.theme-light {
  // --- Palette ---
  --c2g-color-primary:              #d4622a;
  --c2g-color-primary-light:        #fdeee6;
  --c2g-color-primary-dark:         #a84a1c;
  --c2g-color-primary-container:    #fce0d0;
  --c2g-color-on-primary-container: #4a1800;
  --c2g-color-primary-rgb:          212, 98, 42;

  --c2g-color-secondary:            #4ecdc4;
  --c2g-color-secondary-light:      #7eddd7;
  --c2g-color-secondary-dark:       #3ba99f;
  --c2g-color-secondary-container:  #e5f9f7;

  --c2g-color-accent:               #f0c040;
  --c2g-color-accent-light:         #fde98a;
  --c2g-color-accent-dark:          #c99a10;

  // --- Surfaces ---
  --c2g-color-bg-base:              #faf7f2;
  --c2g-color-bg-secondary:         #f0ebe2;
  --c2g-color-bg-tertiary:          #e2d9cc;
  --c2g-color-surface:              #ffffff;
  --c2g-color-surface-glass:        rgba(255, 255, 255, 0.95);

  // --- Text ---
  --c2g-color-text-primary:         #1a1410;
  --c2g-color-text-secondary:       #4d4239;
  --c2g-color-text-muted:           #6e5e50;

  // --- Outline ---
  --c2g-color-outline:              #cfc3b3;
  --c2g-color-outline-variant:      #e2d9cc;
  --c2g-color-border-subtle:        rgba(77, 66, 57, 0.18);
  --c2g-color-border-soft:          rgba(77, 66, 57, 0.12);

  // --- Semantic ---
  --c2g-color-success:              #4caf87;
  --c2g-color-warning:              #f0a030;
  --c2g-color-error:                #d94040;
  --c2g-color-info:                 #4a90d9;

  // --- Semantic surfaces (bg + border for banners/badges) ---
  --c2g-color-warning-surface:      color-mix(in srgb, var(--c2g-color-warning) 10%, var(--c2g-color-surface));
  --c2g-color-warning-border:       color-mix(in srgb, var(--c2g-color-warning) 40%, transparent);
  --c2g-color-warning-text:         #92400e;
  --c2g-color-neutral-bg:           var(--c2g-color-bg-secondary);

  // --- Shadows ---
  --c2g-shadow-color: rgba(31, 24, 16, 0.10);
  @extend %shadows;

  // --- Semantic theme aliases (consumed by Angular Material + components) ---
  --c2g-theme-primary:              var(--c2g-color-primary);
  --c2g-theme-primary-dark:         var(--c2g-color-primary-dark);
  --c2g-theme-primary-hover:        var(--c2g-color-primary-dark);
  --c2g-theme-primary-container:    var(--c2g-color-primary-container);
  --c2g-theme-on-primary:           #ffffff;
  --c2g-theme-on-primary-container: var(--c2g-color-on-primary-container);
  --c2g-theme-primary-shadow:       rgba(212, 98, 42, 0.30);
  --c2g-theme-primary-shadow-lg:    rgba(212, 98, 42, 0.45);

  --c2g-theme-secondary:            var(--c2g-color-secondary);
  --c2g-theme-secondary-hover:      var(--c2g-color-secondary-dark);
  --c2g-theme-secondary-container:  var(--c2g-color-secondary-container);
  --c2g-theme-on-secondary:         #ffffff;
  --c2g-theme-on-secondary-container: var(--c2g-color-text-primary);

  --c2g-theme-surface:                       var(--c2g-color-surface);
  --c2g-theme-surface-container-lowest:      var(--c2g-color-surface);
  --c2g-theme-surface-container-low:         var(--c2g-color-bg-base);
  --c2g-theme-surface-container:             var(--c2g-color-bg-secondary);
  --c2g-theme-surface-container-high:        var(--c2g-color-bg-tertiary);
  --c2g-theme-surface-container-highest:     var(--c2g-color-neutral-300);
  --c2g-theme-on-surface:                    var(--c2g-color-text-primary);
  --c2g-theme-on-surface-variant:            var(--c2g-color-text-secondary);

  --c2g-theme-background:           var(--c2g-color-bg-base);
  --c2g-theme-on-background:        var(--c2g-color-text-primary);

  --c2g-theme-outline:              var(--c2g-color-outline);
  --c2g-theme-outline-variant:      var(--c2g-color-outline-variant);

  --c2g-theme-error:                var(--c2g-color-error);
  --c2g-theme-error-container:      #fdeaea;
  --c2g-theme-on-error:             #ffffff;
  --c2g-theme-on-error-container:   #7f1d1d;

  --c2g-theme-success:              var(--c2g-color-success);
  --c2g-theme-success-container:    #edfaf4;
  --c2g-theme-on-success:           #ffffff;
  --c2g-theme-on-success-container: #14532d;

  --c2g-theme-warning:              var(--c2g-color-warning);
  --c2g-theme-warning-container:    #fff8ed;
  --c2g-theme-on-warning:           #ffffff;
  --c2g-theme-on-warning-container: #78350f;

  // --- Short-form aliases (legacy component compat) ---
  --c2g-primary:            var(--c2g-color-primary);
  --c2g-primary-light:      var(--c2g-color-primary-light);
  --c2g-primary-dark:       var(--c2g-color-primary-dark);
  --c2g-secondary:          var(--c2g-color-secondary);
  --c2g-secondary-light:    var(--c2g-color-secondary-light);
  --c2g-secondary-dark:     var(--c2g-color-secondary-dark);
  --c2g-accent:             var(--c2g-color-accent);
  --c2g-success:            var(--c2g-color-success);
  --c2g-warning:            var(--c2g-color-warning);
  --c2g-error:              var(--c2g-color-error);
  --c2g-info:               var(--c2g-color-info);
  --c2g-text-primary:       var(--c2g-color-text-primary);
  --c2g-text-secondary:     var(--c2g-color-text-secondary);
  --c2g-text-muted:         var(--c2g-color-text-muted);
  --c2g-glass-bg:           var(--c2g-color-surface-glass);

  // Neutral short-form aliases
  --c2g-neutral-50:  var(--c2g-color-neutral-50);
  --c2g-neutral-100: var(--c2g-color-neutral-100);
  --c2g-neutral-200: var(--c2g-color-neutral-200);
  --c2g-neutral-300: var(--c2g-color-neutral-300);
  --c2g-neutral-400: var(--c2g-color-neutral-400);
  --c2g-neutral-500: var(--c2g-color-neutral-500);
  --c2g-neutral-600: var(--c2g-color-neutral-600);
  --c2g-neutral-700: var(--c2g-color-neutral-700);
  --c2g-neutral-800: var(--c2g-color-neutral-800);
  --c2g-neutral-900: var(--c2g-color-neutral-900);

  // Button aliases
  --c2g-color-button-primary:       var(--c2g-color-primary);
  --c2g-color-button-primary-hover: var(--c2g-color-primary-dark);
  --c2g-color-button-primary-text:  #ffffff;
  --c2g-color-button-secondary:     var(--c2g-color-secondary);
  --c2g-color-button-secondary-hover: var(--c2g-color-secondary-dark);
  --c2g-color-button-secondary-text:  var(--c2g-color-text-primary);
  --c2g-color-button-ghost-hover:   var(--c2g-color-primary-light);

  --c2g-color-focus:  var(--c2g-color-primary-dark);
  --c2g-color-accent-light: var(--c2g-color-accent-light);
  --c2g-color-accent-dark:  var(--c2g-color-accent-dark);
}

// ==========================================================================
// DARK THEME — Warm Dark (Cocoa / Charcoal)
// ==========================================================================
body.theme-dark {
  // --- Palette (warm, not cool-blue) ---
  --c2g-color-primary:              #e87848;
  --c2g-color-primary-light:        rgba(232, 120, 72, 0.15);
  --c2g-color-primary-dark:         #c0521c;
  --c2g-color-primary-container:    #4a1c08;
  --c2g-color-on-primary-container: #ffd6c0;
  --c2g-color-primary-rgb:          232, 120, 72;

  --c2g-color-secondary:            #6dd4cc;
  --c2g-color-secondary-light:      #94e0da;
  --c2g-color-secondary-dark:       #3ea69e;
  --c2g-color-secondary-container:  #0d3e3b;

  --c2g-color-accent:               #f2c84a;
  --c2g-color-accent-light:         rgba(242, 200, 74, 0.15);
  --c2g-color-accent-dark:          #c9a020;

  // --- Surfaces (warm charcoal) ---
  --c2g-color-bg-base:              #1a1410;
  --c2g-color-bg-secondary:         #251e19;
  --c2g-color-bg-tertiary:          #2e2520;
  --c2g-color-surface:              #251e19;
  --c2g-color-surface-glass:        rgba(37, 30, 25, 0.96);

  // --- Text ---
  --c2g-color-text-primary:         #f5efe6;
  --c2g-color-text-secondary:       #cfc3b3;
  --c2g-color-text-muted:           #968270;

  // --- Outline ---
  --c2g-color-outline:              #4d4239;
  --c2g-color-outline-variant:      #312a24;
  --c2g-color-border-subtle:        rgba(245, 239, 230, 0.12);
  --c2g-color-border-soft:          rgba(245, 239, 230, 0.08);

  // --- Semantic ---
  --c2g-color-success:              #6fcfa8;
  --c2g-color-warning:              #f5b840;
  --c2g-color-error:                #f07070;
  --c2g-color-info:                 #7ab8f0;

  // --- Semantic surfaces ---
  --c2g-color-warning-surface:      color-mix(in srgb, var(--c2g-color-warning) 12%, var(--c2g-color-surface));
  --c2g-color-warning-border:       color-mix(in srgb, var(--c2g-color-warning) 35%, transparent);
  --c2g-color-warning-text:         var(--c2g-color-warning);
  --c2g-color-neutral-bg:           var(--c2g-color-bg-secondary);

  // --- Shadows ---
  --c2g-shadow-color: rgba(0, 0, 0, 0.45);
  @extend %shadows;

  // --- Semantic theme aliases ---
  --c2g-theme-primary:              var(--c2g-color-primary);
  --c2g-theme-primary-dark:         var(--c2g-color-primary-dark);
  --c2g-theme-primary-hover:        #ff9060;
  --c2g-theme-primary-container:    var(--c2g-color-primary-container);
  --c2g-theme-on-primary:           #1a1410;
  --c2g-theme-on-primary-container: var(--c2g-color-on-primary-container);
  --c2g-theme-primary-shadow:       rgba(232, 120, 72, 0.25);
  --c2g-theme-primary-shadow-lg:    rgba(232, 120, 72, 0.40);

  --c2g-theme-secondary:            var(--c2g-color-secondary);
  --c2g-theme-secondary-hover:      var(--c2g-color-secondary-light);
  --c2g-theme-secondary-container:  var(--c2g-color-secondary-container);
  --c2g-theme-on-secondary:         #1a1410;
  --c2g-theme-on-secondary-container: #a0f0e8;

  --c2g-theme-surface:                       var(--c2g-color-surface);
  --c2g-theme-surface-container-lowest:      var(--c2g-color-bg-base);
  --c2g-theme-surface-container-low:         var(--c2g-color-bg-secondary);
  --c2g-theme-surface-container:             var(--c2g-color-bg-tertiary);
  --c2g-theme-surface-container-high:        #3a3028;
  --c2g-theme-surface-container-highest:     #463c34;
  --c2g-theme-on-surface:                    var(--c2g-color-text-primary);
  --c2g-theme-on-surface-variant:            var(--c2g-color-text-secondary);

  --c2g-theme-background:           var(--c2g-color-bg-base);
  --c2g-theme-on-background:        var(--c2g-color-text-primary);

  --c2g-theme-outline:              var(--c2g-color-outline);
  --c2g-theme-outline-variant:      var(--c2g-color-outline-variant);

  --c2g-theme-error:                var(--c2g-color-error);
  --c2g-theme-error-container:      #5c1a1a;
  --c2g-theme-on-error:             #1a1410;
  --c2g-theme-on-error-container:   #fecaca;

  --c2g-theme-success:              var(--c2g-color-success);
  --c2g-theme-success-container:    #0d3326;
  --c2g-theme-on-success:           #1a1410;
  --c2g-theme-on-success-container: #bbf7d0;

  --c2g-theme-warning:              var(--c2g-color-warning);
  --c2g-theme-warning-container:    #5c3200;
  --c2g-theme-on-warning:           #1a1410;
  --c2g-theme-on-warning-container: #fde68a;

  // --- Short-form aliases ---
  --c2g-primary:          var(--c2g-color-primary);
  --c2g-primary-light:    var(--c2g-color-primary-light);
  --c2g-primary-dark:     var(--c2g-color-primary-dark);
  --c2g-secondary:        var(--c2g-color-secondary);
  --c2g-secondary-light:  var(--c2g-color-secondary-light);
  --c2g-secondary-dark:   var(--c2g-color-secondary-dark);
  --c2g-accent:           var(--c2g-color-accent);
  --c2g-success:          var(--c2g-color-success);
  --c2g-warning:          var(--c2g-color-warning);
  --c2g-error:            var(--c2g-color-error);
  --c2g-info:             var(--c2g-color-info);
  --c2g-text-primary:     var(--c2g-color-text-primary);
  --c2g-text-secondary:   var(--c2g-color-text-secondary);
  --c2g-text-muted:       var(--c2g-color-text-muted);
  --c2g-glass-bg:         var(--c2g-color-surface-glass);
  --c2g-neutral-50:  #f5efe6;
  --c2g-neutral-100: var(--c2g-color-neutral-100);
  --c2g-neutral-200: var(--c2g-color-neutral-200);
  --c2g-neutral-300: var(--c2g-color-neutral-300);
  --c2g-neutral-400: var(--c2g-color-neutral-400);
  --c2g-neutral-500: var(--c2g-color-neutral-500);
  --c2g-neutral-600: var(--c2g-color-neutral-600);
  --c2g-neutral-700: var(--c2g-color-neutral-700);
  --c2g-neutral-800: var(--c2g-color-neutral-800);
  --c2g-neutral-900: var(--c2g-color-neutral-900);

  --c2g-color-button-primary:       var(--c2g-color-primary);
  --c2g-color-button-primary-hover: var(--c2g-theme-primary-hover);
  --c2g-color-button-primary-text:  #1a1410;
  --c2g-color-button-secondary:     var(--c2g-color-secondary);
  --c2g-color-button-secondary-hover: var(--c2g-color-secondary-light);
  --c2g-color-button-secondary-text:  #1a1410;
  --c2g-color-button-ghost-hover:   var(--c2g-color-primary-light);
  --c2g-color-focus: var(--c2g-theme-primary-hover);
}

// ==========================================================================
// AUTO THEME — follows system preference
// ==========================================================================
body.theme-auto {
  @media (prefers-color-scheme: light) {
    // Inherits all light theme tokens
    --c2g-color-primary:              #d4622a;
    --c2g-color-primary-light:        #fdeee6;
    --c2g-color-primary-dark:         #a84a1c;
    --c2g-color-primary-container:    #fce0d0;
    --c2g-color-on-primary-container: #4a1800;
    --c2g-color-secondary:            #4ecdc4;
    --c2g-color-secondary-light:      #7eddd7;
    --c2g-color-secondary-dark:       #3ba99f;
    --c2g-color-secondary-container:  #e5f9f7;
    --c2g-color-accent:               #f0c040;
    --c2g-color-bg-base:              #faf7f2;
    --c2g-color-bg-secondary:         #f0ebe2;
    --c2g-color-bg-tertiary:          #e2d9cc;
    --c2g-color-surface:              #ffffff;
    --c2g-color-surface-glass:        rgba(255, 255, 255, 0.95);
    --c2g-color-text-primary:         #1a1410;
    --c2g-color-text-secondary:       #4d4239;
    --c2g-color-text-muted:           #6e5e50;
    --c2g-color-outline:              #cfc3b3;
    --c2g-color-outline-variant:      #e2d9cc;
    --c2g-shadow-color: rgba(31, 24, 16, 0.10);
    --c2g-theme-primary:              #d4622a;
    --c2g-theme-primary-hover:        #a84a1c;
    --c2g-theme-primary-container:    #fce0d0;
    --c2g-theme-on-primary:           #ffffff;
    --c2g-theme-on-primary-container: #4a1800;
    --c2g-theme-secondary:            #4ecdc4;
    --c2g-theme-secondary-hover:      #3ba99f;
    --c2g-theme-secondary-container:  #e5f9f7;
    --c2g-theme-on-secondary:         #ffffff;
    --c2g-theme-on-secondary-container: #1a1410;
    --c2g-theme-surface:                   #ffffff;
    --c2g-theme-surface-container-lowest:  #ffffff;
    --c2g-theme-surface-container-low:     #faf7f2;
    --c2g-theme-surface-container:         #f0ebe2;
    --c2g-theme-surface-container-high:    #e2d9cc;
    --c2g-theme-surface-container-highest: #cfc3b3;
    --c2g-theme-on-surface:                #1a1410;
    --c2g-theme-on-surface-variant:        #4d4239;
    --c2g-theme-background:           #faf7f2;
    --c2g-theme-on-background:        #1a1410;
    --c2g-theme-outline:              #cfc3b3;
    --c2g-theme-outline-variant:      #e2d9cc;
    --c2g-theme-error:                #d94040;
    --c2g-theme-success:              #4caf87;
    --c2g-theme-warning:              #f0a030;
  }

  @media (prefers-color-scheme: dark) {
    // Inherits all dark theme tokens
    --c2g-color-primary:              #e87848;
    --c2g-color-primary-light:        rgba(232, 120, 72, 0.15);
    --c2g-color-primary-dark:         #c0521c;
    --c2g-color-primary-container:    #4a1c08;
    --c2g-color-on-primary-container: #ffd6c0;
    --c2g-color-secondary:            #6dd4cc;
    --c2g-color-secondary-light:      #94e0da;
    --c2g-color-secondary-dark:       #3ea69e;
    --c2g-color-secondary-container:  #0d3e3b;
    --c2g-color-accent:               #f2c84a;
    --c2g-color-bg-base:              #1a1410;
    --c2g-color-bg-secondary:         #251e19;
    --c2g-color-bg-tertiary:          #2e2520;
    --c2g-color-surface:              #251e19;
    --c2g-color-surface-glass:        rgba(37, 30, 25, 0.96);
    --c2g-color-text-primary:         #f5efe6;
    --c2g-color-text-secondary:       #cfc3b3;
    --c2g-color-text-muted:           #968270;
    --c2g-color-outline:              #4d4239;
    --c2g-color-outline-variant:      #312a24;
    --c2g-shadow-color: rgba(0, 0, 0, 0.45);
    --c2g-theme-primary:              #e87848;
    --c2g-theme-primary-hover:        #ff9060;
    --c2g-theme-primary-container:    #4a1c08;
    --c2g-theme-on-primary:           #1a1410;
    --c2g-theme-on-primary-container: #ffd6c0;
    --c2g-theme-secondary:            #6dd4cc;
    --c2g-theme-secondary-hover:      #94e0da;
    --c2g-theme-secondary-container:  #0d3e3b;
    --c2g-theme-on-secondary:         #1a1410;
    --c2g-theme-on-secondary-container: #a0f0e8;
    --c2g-theme-surface:                   #251e19;
    --c2g-theme-surface-container-lowest:  #1a1410;
    --c2g-theme-surface-container-low:     #251e19;
    --c2g-theme-surface-container:         #2e2520;
    --c2g-theme-surface-container-high:    #3a3028;
    --c2g-theme-surface-container-highest: #463c34;
    --c2g-theme-on-surface:                #f5efe6;
    --c2g-theme-on-surface-variant:        #cfc3b3;
    --c2g-theme-background:           #1a1410;
    --c2g-theme-on-background:        #f5efe6;
    --c2g-theme-outline:              #4d4239;
    --c2g-theme-outline-variant:      #312a24;
    --c2g-theme-error:                #f07070;
    --c2g-theme-success:              #6fcfa8;
    --c2g-theme-warning:              #f5b840;
    --c2g-color-warning-text:         var(--c2g-color-warning);
  }
}

// ==========================================================================
// SPRING THEME — Leaf green + Apricot + Lime
// ==========================================================================
body.theme-spring {
  --c2g-color-primary:              #4e8c38;
  --c2g-color-primary-light:        #edf7e8;
  --c2g-color-primary-dark:         #366425;
  --c2g-color-primary-container:    #d6f0c8;
  --c2g-color-on-primary-container: #1a3410;
  --c2g-color-primary-rgb:          78, 140, 56;

  --c2g-color-secondary:            #f4a261;
  --c2g-color-secondary-light:      #fac49a;
  --c2g-color-secondary-dark:       #d07838;
  --c2g-color-secondary-container:  #fde8d4;

  --c2g-color-accent:               #7ec850;
  --c2g-color-accent-light:         #b8e898;
  --c2g-color-accent-dark:          #549830;

  --c2g-color-bg-base:              #f6fbf3;
  --c2g-color-bg-secondary:         #eaf4e4;
  --c2g-color-bg-tertiary:          #d8ecd0;
  --c2g-color-surface:              #ffffff;
  --c2g-color-surface-glass:        rgba(255, 255, 255, 0.95);

  --c2g-color-text-primary:         #182812;
  --c2g-color-text-secondary:       #3a5230;
  --c2g-color-text-muted:           #5e7854;

  --c2g-color-outline:              #b8d8a8;
  --c2g-color-outline-variant:      #d8ecd0;
  --c2g-color-border-subtle:        rgba(24, 40, 18, 0.16);
  --c2g-color-border-soft:          rgba(24, 40, 18, 0.10);

  --c2g-color-success:              #4caf87;
  --c2g-color-warning:              #f0a030;
  --c2g-color-error:                #d94040;
  --c2g-color-info:                 #4a90d9;

  --c2g-shadow-color: rgba(24, 40, 18, 0.10);
  @extend %shadows;

  --c2g-theme-primary:              var(--c2g-color-primary);
  --c2g-theme-primary-dark:         var(--c2g-color-primary-dark);
  --c2g-theme-primary-hover:        var(--c2g-color-primary-dark);
  --c2g-theme-primary-container:    var(--c2g-color-primary-container);
  --c2g-theme-on-primary:           #ffffff;
  --c2g-theme-on-primary-container: var(--c2g-color-on-primary-container);
  --c2g-theme-primary-shadow:       rgba(78, 140, 56, 0.28);
  --c2g-theme-primary-shadow-lg:    rgba(78, 140, 56, 0.42);

  --c2g-theme-secondary:            var(--c2g-color-secondary);
  --c2g-theme-secondary-hover:      var(--c2g-color-secondary-dark);
  --c2g-theme-secondary-container:  var(--c2g-color-secondary-container);
  --c2g-theme-on-secondary:         #ffffff;
  --c2g-theme-on-secondary-container: var(--c2g-color-text-primary);

  --c2g-theme-surface:                       var(--c2g-color-surface);
  --c2g-theme-surface-container-lowest:      var(--c2g-color-surface);
  --c2g-theme-surface-container-low:         var(--c2g-color-bg-base);
  --c2g-theme-surface-container:             var(--c2g-color-bg-secondary);
  --c2g-theme-surface-container-high:        var(--c2g-color-bg-tertiary);
  --c2g-theme-surface-container-highest:     var(--c2g-color-neutral-300);
  --c2g-theme-on-surface:                    var(--c2g-color-text-primary);
  --c2g-theme-on-surface-variant:            var(--c2g-color-text-secondary);

  --c2g-theme-background:           var(--c2g-color-bg-base);
  --c2g-theme-on-background:        var(--c2g-color-text-primary);
  --c2g-theme-outline:              var(--c2g-color-outline);
  --c2g-theme-outline-variant:      var(--c2g-color-outline-variant);
  --c2g-theme-error:                var(--c2g-color-error);
  --c2g-theme-success:              var(--c2g-color-success);
  --c2g-theme-warning:              var(--c2g-color-warning);

  --c2g-primary:          var(--c2g-color-primary);
  --c2g-primary-light:    var(--c2g-color-primary-light);
  --c2g-primary-dark:     var(--c2g-color-primary-dark);
  --c2g-secondary:        var(--c2g-color-secondary);
  --c2g-secondary-light:  var(--c2g-color-secondary-light);
  --c2g-secondary-dark:   var(--c2g-color-secondary-dark);
  --c2g-accent:           var(--c2g-color-accent);
  --c2g-glass-bg:         var(--c2g-color-surface-glass);
  --c2g-text-primary:     var(--c2g-color-text-primary);
  --c2g-text-secondary:   var(--c2g-color-text-secondary);
  --c2g-text-muted:       var(--c2g-color-text-muted);
  --c2g-color-button-primary:       var(--c2g-color-primary);
  --c2g-color-button-primary-hover: var(--c2g-color-primary-dark);
  --c2g-color-button-primary-text:  #ffffff;
  --c2g-color-button-ghost-hover:   var(--c2g-color-primary-light);
  --c2g-color-focus:                var(--c2g-color-primary-dark);
}

// ==========================================================================
// SUMMER THEME — Terracotta + Teal + Gold (same palette as default, explicit)
// ==========================================================================
body.theme-summer {
  --c2g-color-primary:              #d4622a;
  --c2g-color-primary-light:        #fdeee6;
  --c2g-color-primary-dark:         #a84a1c;
  --c2g-color-primary-container:    #fce0d0;
  --c2g-color-on-primary-container: #4a1800;
  --c2g-color-primary-rgb:          212, 98, 42;

  --c2g-color-secondary:            #4ecdc4;
  --c2g-color-secondary-light:      #7eddd7;
  --c2g-color-secondary-dark:       #3ba99f;
  --c2g-color-secondary-container:  #e5f9f7;

  --c2g-color-accent:               #f7c948;
  --c2g-color-accent-light:         #fde98a;
  --c2g-color-accent-dark:          #c99a10;

  --c2g-color-bg-base:              #fffaf4;
  --c2g-color-bg-secondary:         #fff0e2;
  --c2g-color-bg-tertiary:          #fde4cc;
  --c2g-color-surface:              #ffffff;
  --c2g-color-surface-glass:        rgba(255, 255, 255, 0.95);

  --c2g-color-text-primary:         #2a1508;
  --c2g-color-text-secondary:       #5c3018;
  --c2g-color-text-muted:           #8a5838;

  --c2g-color-outline:              #e8c8a8;
  --c2g-color-outline-variant:      #fde4cc;
  --c2g-color-border-subtle:        rgba(42, 21, 8, 0.16);
  --c2g-color-border-soft:          rgba(42, 21, 8, 0.10);

  --c2g-color-success:              #4caf87;
  --c2g-color-warning:              #f0a030;
  --c2g-color-error:                #d94040;
  --c2g-color-info:                 #4a90d9;

  --c2g-shadow-color: rgba(42, 21, 8, 0.12);
  @extend %shadows;

  --c2g-theme-primary:              var(--c2g-color-primary);
  --c2g-theme-primary-dark:         var(--c2g-color-primary-dark);
  --c2g-theme-primary-hover:        var(--c2g-color-primary-dark);
  --c2g-theme-primary-container:    var(--c2g-color-primary-container);
  --c2g-theme-on-primary:           #ffffff;
  --c2g-theme-on-primary-container: var(--c2g-color-on-primary-container);
  --c2g-theme-primary-shadow:       rgba(212, 98, 42, 0.32);
  --c2g-theme-primary-shadow-lg:    rgba(212, 98, 42, 0.48);

  --c2g-theme-secondary:            var(--c2g-color-secondary);
  --c2g-theme-secondary-hover:      var(--c2g-color-secondary-dark);
  --c2g-theme-secondary-container:  var(--c2g-color-secondary-container);
  --c2g-theme-on-secondary:         #ffffff;
  --c2g-theme-on-secondary-container: var(--c2g-color-text-primary);

  --c2g-theme-surface:                       var(--c2g-color-surface);
  --c2g-theme-surface-container-lowest:      var(--c2g-color-surface);
  --c2g-theme-surface-container-low:         var(--c2g-color-bg-base);
  --c2g-theme-surface-container:             var(--c2g-color-bg-secondary);
  --c2g-theme-surface-container-high:        var(--c2g-color-bg-tertiary);
  --c2g-theme-surface-container-highest:     #f5c8a8;
  --c2g-theme-on-surface:                    var(--c2g-color-text-primary);
  --c2g-theme-on-surface-variant:            var(--c2g-color-text-secondary);

  --c2g-theme-background:           var(--c2g-color-bg-base);
  --c2g-theme-on-background:        var(--c2g-color-text-primary);
  --c2g-theme-outline:              var(--c2g-color-outline);
  --c2g-theme-outline-variant:      var(--c2g-color-outline-variant);
  --c2g-theme-error:                var(--c2g-color-error);
  --c2g-theme-success:              var(--c2g-color-success);
  --c2g-theme-warning:              var(--c2g-color-warning);

  --c2g-primary:          var(--c2g-color-primary);
  --c2g-primary-light:    var(--c2g-color-primary-light);
  --c2g-primary-dark:     var(--c2g-color-primary-dark);
  --c2g-secondary:        var(--c2g-color-secondary);
  --c2g-secondary-light:  var(--c2g-color-secondary-light);
  --c2g-secondary-dark:   var(--c2g-color-secondary-dark);
  --c2g-accent:           var(--c2g-color-accent);
  --c2g-glass-bg:         var(--c2g-color-surface-glass);
  --c2g-text-primary:     var(--c2g-color-text-primary);
  --c2g-text-secondary:   var(--c2g-color-text-secondary);
  --c2g-text-muted:       var(--c2g-color-text-muted);
  --c2g-color-button-primary:       var(--c2g-color-primary);
  --c2g-color-button-primary-hover: var(--c2g-color-primary-dark);
  --c2g-color-button-primary-text:  #ffffff;
  --c2g-color-button-ghost-hover:   var(--c2g-color-primary-light);
  --c2g-color-focus:                var(--c2g-color-primary-dark);
}

// ==========================================================================
// AUTUMN THEME — Rust + Sage + Amber
// ==========================================================================
body.theme-autumn {
  --c2g-color-primary:              #b8421a;
  --c2g-color-primary-light:        #faeae4;
  --c2g-color-primary-dark:         #8c2c0e;
  --c2g-color-primary-container:    #f5d0c0;
  --c2g-color-on-primary-container: #380e04;
  --c2g-color-primary-rgb:          184, 66, 26;

  --c2g-color-secondary:            #6b8f6b;
  --c2g-color-secondary-light:      #94b894;
  --c2g-color-secondary-dark:       #4a6a4a;
  --c2g-color-secondary-container:  #ddeedd;

  --c2g-color-accent:               #d4892a;
  --c2g-color-accent-light:         #f5d090;
  --c2g-color-accent-dark:          #a06010;

  --c2g-color-bg-base:              #fdf5ed;
  --c2g-color-bg-secondary:         #f5e8d8;
  --c2g-color-bg-tertiary:          #ead8c4;
  --c2g-color-surface:              #ffffff;
  --c2g-color-surface-glass:        rgba(255, 255, 255, 0.95);

  --c2g-color-text-primary:         #241008;
  --c2g-color-text-secondary:       #4e2c18;
  --c2g-color-text-muted:           #7a5038;

  --c2g-color-outline:              #d8b898;
  --c2g-color-outline-variant:      #ead8c4;
  --c2g-color-border-subtle:        rgba(36, 16, 8, 0.16);
  --c2g-color-border-soft:          rgba(36, 16, 8, 0.10);

  --c2g-color-success:              #4caf87;
  --c2g-color-warning:              #d4892a;
  --c2g-color-error:                #d94040;
  --c2g-color-info:                 #4a90d9;

  --c2g-shadow-color: rgba(36, 16, 8, 0.12);
  @extend %shadows;

  --c2g-theme-primary:              var(--c2g-color-primary);
  --c2g-theme-primary-dark:         var(--c2g-color-primary-dark);
  --c2g-theme-primary-hover:        var(--c2g-color-primary-dark);
  --c2g-theme-primary-container:    var(--c2g-color-primary-container);
  --c2g-theme-on-primary:           #ffffff;
  --c2g-theme-on-primary-container: var(--c2g-color-on-primary-container);
  --c2g-theme-primary-shadow:       rgba(184, 66, 26, 0.28);
  --c2g-theme-primary-shadow-lg:    rgba(184, 66, 26, 0.42);

  --c2g-theme-secondary:            var(--c2g-color-secondary);
  --c2g-theme-secondary-hover:      var(--c2g-color-secondary-dark);
  --c2g-theme-secondary-container:  var(--c2g-color-secondary-container);
  --c2g-theme-on-secondary:         #ffffff;
  --c2g-theme-on-secondary-container: var(--c2g-color-text-primary);

  --c2g-theme-surface:                       var(--c2g-color-surface);
  --c2g-theme-surface-container-lowest:      var(--c2g-color-surface);
  --c2g-theme-surface-container-low:         var(--c2g-color-bg-base);
  --c2g-theme-surface-container:             var(--c2g-color-bg-secondary);
  --c2g-theme-surface-container-high:        var(--c2g-color-bg-tertiary);
  --c2g-theme-surface-container-highest:     #ddc8a8;
  --c2g-theme-on-surface:                    var(--c2g-color-text-primary);
  --c2g-theme-on-surface-variant:            var(--c2g-color-text-secondary);

  --c2g-theme-background:           var(--c2g-color-bg-base);
  --c2g-theme-on-background:        var(--c2g-color-text-primary);
  --c2g-theme-outline:              var(--c2g-color-outline);
  --c2g-theme-outline-variant:      var(--c2g-color-outline-variant);
  --c2g-theme-error:                var(--c2g-color-error);
  --c2g-theme-success:              var(--c2g-color-success);
  --c2g-theme-warning:              var(--c2g-color-warning);

  --c2g-primary:          var(--c2g-color-primary);
  --c2g-primary-light:    var(--c2g-color-primary-light);
  --c2g-primary-dark:     var(--c2g-color-primary-dark);
  --c2g-secondary:        var(--c2g-color-secondary);
  --c2g-secondary-light:  var(--c2g-color-secondary-light);
  --c2g-secondary-dark:   var(--c2g-color-secondary-dark);
  --c2g-accent:           var(--c2g-color-accent);
  --c2g-glass-bg:         var(--c2g-color-surface-glass);
  --c2g-text-primary:     var(--c2g-color-text-primary);
  --c2g-text-secondary:   var(--c2g-color-text-secondary);
  --c2g-text-muted:       var(--c2g-color-text-muted);
  --c2g-color-button-primary:       var(--c2g-color-primary);
  --c2g-color-button-primary-hover: var(--c2g-color-primary-dark);
  --c2g-color-button-primary-text:  #ffffff;
  --c2g-color-button-ghost-hover:   var(--c2g-color-primary-light);
  --c2g-color-focus:                var(--c2g-color-primary-dark);
}

// ==========================================================================
// WINTER THEME — Steel blue + Ice + Silver
// ==========================================================================
body.theme-winter {
  --c2g-color-primary:              #2e6b9e;
  --c2g-color-primary-light:        #e8f2fa;
  --c2g-color-primary-dark:         #1e4d72;
  --c2g-color-primary-container:    #c8e2f5;
  --c2g-color-on-primary-container: #0a1e30;
  --c2g-color-primary-rgb:          46, 107, 158;

  --c2g-color-secondary:            #7eb8d4;
  --c2g-color-secondary-light:      #a8d0e4;
  --c2g-color-secondary-dark:       #5490b0;
  --c2g-color-secondary-container:  #d8eef8;

  --c2g-color-accent:               #a8c5da;
  --c2g-color-accent-light:         #d0e4f0;
  --c2g-color-accent-dark:          #7098b8;

  --c2g-color-bg-base:              #f4f8fc;
  --c2g-color-bg-secondary:         #e4eef6;
  --c2g-color-bg-tertiary:          #d4e4f0;
  --c2g-color-surface:              #ffffff;
  --c2g-color-surface-glass:        rgba(255, 255, 255, 0.95);

  --c2g-color-text-primary:         #0c1e2e;
  --c2g-color-text-secondary:       #243850;
  --c2g-color-text-muted:           #485c70;

  --c2g-color-outline:              #b0c8da;
  --c2g-color-outline-variant:      #d4e4f0;
  --c2g-color-border-subtle:        rgba(12, 30, 46, 0.15);
  --c2g-color-border-soft:          rgba(12, 30, 46, 0.09);

  --c2g-color-success:              #4caf87;
  --c2g-color-warning:              #f0a030;
  --c2g-color-error:                #d94040;
  --c2g-color-info:                 #4a90d9;

  --c2g-shadow-color: rgba(12, 30, 46, 0.10);
  @extend %shadows;

  --c2g-theme-primary:              var(--c2g-color-primary);
  --c2g-theme-primary-dark:         var(--c2g-color-primary-dark);
  --c2g-theme-primary-hover:        var(--c2g-color-primary-dark);
  --c2g-theme-primary-container:    var(--c2g-color-primary-container);
  --c2g-theme-on-primary:           #ffffff;
  --c2g-theme-on-primary-container: var(--c2g-color-on-primary-container);
  --c2g-theme-primary-shadow:       rgba(46, 107, 158, 0.28);
  --c2g-theme-primary-shadow-lg:    rgba(46, 107, 158, 0.42);

  --c2g-theme-secondary:            var(--c2g-color-secondary);
  --c2g-theme-secondary-hover:      var(--c2g-color-secondary-dark);
  --c2g-theme-secondary-container:  var(--c2g-color-secondary-container);
  --c2g-theme-on-secondary:         #ffffff;
  --c2g-theme-on-secondary-container: var(--c2g-color-text-primary);

  --c2g-theme-surface:                       var(--c2g-color-surface);
  --c2g-theme-surface-container-lowest:      var(--c2g-color-surface);
  --c2g-theme-surface-container-low:         var(--c2g-color-bg-base);
  --c2g-theme-surface-container:             var(--c2g-color-bg-secondary);
  --c2g-theme-surface-container-high:        var(--c2g-color-bg-tertiary);
  --c2g-theme-surface-container-highest:     #b8d4e8;
  --c2g-theme-on-surface:                    var(--c2g-color-text-primary);
  --c2g-theme-on-surface-variant:            var(--c2g-color-text-secondary);

  --c2g-theme-background:           var(--c2g-color-bg-base);
  --c2g-theme-on-background:        var(--c2g-color-text-primary);
  --c2g-theme-outline:              var(--c2g-color-outline);
  --c2g-theme-outline-variant:      var(--c2g-color-outline-variant);
  --c2g-theme-error:                var(--c2g-color-error);
  --c2g-theme-success:              var(--c2g-color-success);
  --c2g-theme-warning:              var(--c2g-color-warning);

  --c2g-primary:          var(--c2g-color-primary);
  --c2g-primary-light:    var(--c2g-color-primary-light);
  --c2g-primary-dark:     var(--c2g-color-primary-dark);
  --c2g-secondary:        var(--c2g-color-secondary);
  --c2g-secondary-light:  var(--c2g-color-secondary-light);
  --c2g-secondary-dark:   var(--c2g-color-secondary-dark);
  --c2g-accent:           var(--c2g-color-accent);
  --c2g-glass-bg:         var(--c2g-color-surface-glass);
  --c2g-text-primary:     var(--c2g-color-text-primary);
  --c2g-text-secondary:   var(--c2g-color-text-secondary);
  --c2g-text-muted:       var(--c2g-color-text-muted);
  --c2g-color-button-primary:       var(--c2g-color-primary);
  --c2g-color-button-primary-hover: var(--c2g-color-primary-dark);
  --c2g-color-button-primary-text:  #ffffff;
  --c2g-color-button-ghost-hover:   var(--c2g-color-primary-light);
  --c2g-color-focus:                var(--c2g-color-primary-dark);
}

// ==========================================================================
// HIGH CONTRAST — WCAG AAA
// ==========================================================================
body.theme-high-contrast {
  --c2g-theme-primary:              #993d1a;
  --c2g-theme-primary-dark:         #662610;
  --c2g-theme-primary-hover:        #7a2e14;
  --c2g-theme-primary-container:    #ffe6cc;
  --c2g-theme-on-primary:           #ffffff;
  --c2g-theme-on-primary-container: #000000;
  --c2g-theme-secondary:            #005f5f;
  --c2g-theme-secondary-hover:      #004040;
  --c2g-theme-secondary-container:  #ccffff;
  --c2g-theme-on-secondary:         #ffffff;
  --c2g-theme-on-secondary-container: #000000;
  --c2g-theme-surface:              #ffffff;
  --c2g-theme-surface-container-lowest:  #ffffff;
  --c2g-theme-surface-container-low:     #f8f8f8;
  --c2g-theme-surface-container:         #f0f0f0;
  --c2g-theme-surface-container-high:    #e8e8e8;
  --c2g-theme-surface-container-highest: #d0d0d0;
  --c2g-theme-on-surface:           #000000;
  --c2g-theme-on-surface-variant:   #222222;
  --c2g-theme-background:           #ffffff;
  --c2g-theme-on-background:        #000000;
  --c2g-theme-outline:              #444444;
  --c2g-theme-outline-variant:      #888888;
  --c2g-theme-error:                #bb0000;
  --c2g-theme-error-container:      #ffcccc;
  --c2g-theme-on-error:             #ffffff;
  --c2g-theme-on-error-container:   #000000;
  --c2g-theme-success:              #005500;
  --c2g-theme-success-container:    #ccffcc;
  --c2g-theme-on-success:           #ffffff;
  --c2g-theme-on-success-container: #000000;
  --c2g-theme-warning:              #884400;
  --c2g-theme-warning-container:    #ffe6cc;
  --c2g-theme-on-warning:           #ffffff;
  --c2g-theme-on-warning-container: #000000;
  --c2g-shadow-color: rgba(0, 0, 0, 0.50);
  @extend %shadows;
  --c2g-focus-ring: 3px solid #993d1a;
  --c2g-border-width: 2px;
  --c2g-primary: #993d1a;
  --c2g-secondary: #005f5f;
  --c2g-text-primary: #000000;
  --c2g-text-secondary: #222222;
}

// ==========================================================================
// ACCESSIBILITY + MOTION
// ==========================================================================
body.theme-high-contrast *:focus-visible {
  outline: var(--c2g-focus-ring, 2px solid var(--c2g-theme-primary));
  outline-offset: 2px;
}

body.theme-high-contrast {
  .mat-mdc-button,
  .mat-mdc-card,
  .mat-mdc-menu-panel {
    border: var(--c2g-border-width, 1px) solid var(--c2g-theme-outline);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  transition:
    background-color var(--c2g-transition-medium),
    color            var(--c2g-transition-medium);
}