/* ============================================================
   EliteDrive — Palette themes
   Each palette overrides the semantic color tokens defined in
   tokens.css. The design-system uses these token names:
     --color-bg, --color-bg-elevated, --color-surface,
     --color-surface-hover, --color-text, --color-text-muted,
     --color-border, --color-border-strong, --color-divider,
     --color-accent, --color-accent-hover, --color-accent-active,
     --color-accent-soft, --color-accent-contrast,
     --color-success/warning/danger/info (+ *-soft),
     --glass-bg, --glass-bg-strong, --glass-border.

   Also mapped to the legacy aliases that components.css/site.css
   already consume (--color-background, --color-foreground, etc.)
   so existing views keep working without renames.
   ============================================================ */

/* -------- METALLIC NOIR (default, dark) ---------------------- */
:root,
[data-theme="metallic-noir"] {
    color-scheme: dark;

    --color-bg:              #0e0f12;
    --color-bg-elevated:     #15171b;
    --color-surface:         #1b1e24;
    --color-surface-hover:   #21252c;
    --color-text:            #e6e8ec;
    --color-text-muted:      #9aa1ad;
    --color-text-faint:      #606772;
    --color-text-inverse:    #0e0f12;
    --color-border:          rgba(255, 255, 255, 0.06);
    --color-border-strong:   rgba(255, 255, 255, 0.14);
    --color-divider:         rgba(255, 255, 255, 0.04);

    --color-accent:          #d4a24c;
    --color-accent-hover:    #e2b768;
    --color-accent-active:   #b58736;
    --color-accent-soft:     rgba(212, 162, 76, 0.22);
    --color-accent-contrast: #0e0f12;

    --color-success:         #3cc892;
    --color-warning-accent:  #e4b343;
    --color-danger-accent:   #e0576b;
    --color-info-accent:     #4ea0e8;
    --color-success-soft:    rgba(60, 200, 146, .16);
    --color-warning-soft:    rgba(228, 179, 67, .18);
    --color-danger-soft:     rgba(224, 87, 107, .18);
    --color-info-soft:       rgba(78, 160, 232, .18);

    --glass-bg:              rgba(22, 24, 28, 0.62);
    --glass-bg-strong:       rgba(22, 24, 28, 0.84);
    --glass-bg-sunken:       rgba(14, 15, 18, 0.55);
    --glass-border:          rgba(255, 255, 255, 0.08);
    --glass-border-soft:     rgba(255, 255, 255, 0.05);

    --focus-ring:            0 0 0 3px var(--color-accent-soft);
}

/* -------- DREAMLAND ADVENTURE (light) ------------------------ */
[data-theme="dreamland"] {
    color-scheme: light;

    --color-bg:              #fdf7fb;
    --color-bg-elevated:     #fbf2f7;
    --color-surface:         #ffffff;
    --color-surface-hover:   #f6eaf0;
    --color-text:            #3a2d4a;
    --color-text-muted:      #7a6b8a;
    --color-text-faint:      #a99ab6;
    --color-text-inverse:    #ffffff;
    --color-border:          rgba(58, 45, 74, 0.08);
    --color-border-strong:   rgba(58, 45, 74, 0.18);
    --color-divider:         rgba(58, 45, 74, 0.04);

    --color-accent:          #cdb4db;
    --color-accent-hover:    #ffc8dd;
    --color-accent-active:   #ffafcc;
    --color-accent-soft:     rgba(205, 180, 219, 0.30);
    --color-accent-contrast: #3a2d4a;

    --color-success:         #6cb28a;
    --color-warning-accent:  #e8b863;
    --color-danger-accent:   #e57a86;
    --color-info-accent:     #8ab6e0;
    --color-success-soft:    rgba(108, 178, 138, .18);
    --color-warning-soft:    rgba(232, 184, 99, .18);
    --color-danger-soft:     rgba(229, 122, 134, .18);
    --color-info-soft:       rgba(138, 182, 224, .22);

    --glass-bg:              rgba(255, 255, 255, 0.62);
    --glass-bg-strong:       rgba(255, 255, 255, 0.82);
    --glass-bg-sunken:       rgba(251, 242, 247, 0.60);
    --glass-border:          rgba(58, 45, 74, 0.10);
    --glass-border-soft:     rgba(58, 45, 74, 0.06);
}

/* -------- ARCTIC STEEL (light) ------------------------------- */
[data-theme="arctic-steel"] {
    color-scheme: light;

    --color-bg:              #f4f6f9;
    --color-bg-elevated:     #eef1f5;
    --color-surface:         #ffffff;
    --color-surface-hover:   #e9eef5;
    --color-text:            #1a2230;
    --color-text-muted:      #5a6678;
    --color-text-faint:      #8a94a5;
    --color-text-inverse:    #ffffff;
    --color-border:          rgba(26, 34, 48, 0.08);
    --color-border-strong:   #d4dae3;
    --color-divider:         rgba(26, 34, 48, 0.04);

    --color-accent:          #2a6ef5;
    --color-accent-hover:    #1f5bd1;
    --color-accent-active:   #174aad;
    --color-accent-soft:     rgba(42, 110, 245, 0.14);
    --color-accent-contrast: #ffffff;

    --color-success:         #38a16b;
    --color-warning-accent:  #d99a2b;
    --color-danger-accent:   #d6485a;
    --color-info-accent:     #4a8cd1;
    --color-success-soft:    rgba(56, 161, 107, .14);
    --color-warning-soft:    rgba(217, 154, 43, .16);
    --color-danger-soft:     rgba(214, 72, 90, .14);
    --color-info-soft:       rgba(74, 140, 209, .18);

    --glass-bg:              rgba(255, 255, 255, 0.60);
    --glass-bg-strong:       rgba(255, 255, 255, 0.82);
    --glass-bg-sunken:       rgba(238, 241, 245, 0.62);
    --glass-border:          rgba(26, 34, 48, 0.08);
    --glass-border-soft:     rgba(26, 34, 48, 0.05);
}

/* -------- SUNSET EMBER (dark) -------------------------------- */
[data-theme="sunset-ember"] {
    color-scheme: dark;

    --color-bg:              #160f14;
    --color-bg-elevated:     #1d1318;
    --color-surface:         #241a20;
    --color-surface-hover:   #2c1f26;
    --color-text:            #f5e9e1;
    --color-text-muted:      #b89e94;
    --color-text-faint:      #7a6961;
    --color-text-inverse:    #160f14;
    --color-border:          rgba(245, 233, 225, 0.08);
    --color-border-strong:   rgba(245, 233, 225, 0.16);
    --color-divider:         rgba(245, 233, 225, 0.04);

    --color-accent:          #ff7a5a;
    --color-accent-hover:    #ff9676;
    --color-accent-active:   #e66146;
    --color-accent-soft:     rgba(255, 122, 90, 0.22);
    --color-accent-contrast: #160f14;

    --color-success:         #6fce9a;
    --color-warning-accent:  #f5a524;
    --color-danger-accent:   #e0576b;
    --color-info-accent:     #f5a524;
    --color-success-soft:    rgba(111, 206, 154, .16);
    --color-warning-soft:    rgba(245, 165, 36, .20);
    --color-danger-soft:     rgba(224, 87, 107, .18);
    --color-info-soft:       rgba(245, 165, 36, .18);

    --glass-bg:              rgba(36, 26, 32, 0.62);
    --glass-bg-strong:       rgba(36, 26, 32, 0.84);
    --glass-bg-sunken:       rgba(22, 15, 20, 0.55);
    --glass-border:          rgba(245, 233, 225, 0.08);
    --glass-border-soft:     rgba(245, 233, 225, 0.05);
}

/* -------- FOREST SAGE (light) -------------------------------- */
[data-theme="forest-sage"] {
    color-scheme: light;

    --color-bg:              #f5f4ee;
    --color-bg-elevated:     #efede4;
    --color-surface:         #ffffff;
    --color-surface-hover:   #ebe8dc;
    --color-text:            #2a3326;
    --color-text-muted:      #5c6755;
    --color-text-faint:      #8b9382;
    --color-text-inverse:    #ffffff;
    --color-border:          rgba(42, 51, 38, 0.08);
    --color-border-strong:   rgba(42, 51, 38, 0.18);
    --color-divider:         rgba(42, 51, 38, 0.04);

    --color-accent:          #6b8e4e;
    --color-accent-hover:    #7ea25c;
    --color-accent-active:   #567241;
    --color-accent-soft:     rgba(107, 142, 78, 0.18);
    --color-accent-contrast: #ffffff;

    --color-success:         #4e8a66;
    --color-warning-accent:  #bd8e3a;
    --color-danger-accent:   #b85a5a;
    --color-info-accent:     #5a82a0;
    --color-success-soft:    rgba(78, 138, 102, .14);
    --color-warning-soft:    rgba(189, 142, 58, .16);
    --color-danger-soft:     rgba(184, 90, 90, .14);
    --color-info-soft:       rgba(90, 130, 160, .16);

    --glass-bg:              rgba(255, 255, 255, 0.60);
    --glass-bg-strong:       rgba(255, 255, 255, 0.82);
    --glass-bg-sunken:       rgba(239, 237, 228, 0.62);
    --glass-border:          rgba(42, 51, 38, 0.08);
    --glass-border-soft:     rgba(42, 51, 38, 0.05);
}

/* -------- MIDNIGHT ORCHID (dark) ----------------------------- */
[data-theme="midnight-orchid"] {
    color-scheme: dark;

    --color-bg:              #110c1a;
    --color-bg-elevated:     #17112a;
    --color-surface:         #1b1430;
    --color-surface-hover:   #241a3d;
    --color-text:            #e8e4f3;
    --color-text-muted:      #a299c3;
    --color-text-faint:      #6e678c;
    --color-text-inverse:    #110c1a;
    --color-border:          rgba(232, 228, 243, 0.08);
    --color-border-strong:   rgba(232, 228, 243, 0.16);
    --color-divider:         rgba(232, 228, 243, 0.04);

    --color-accent:          #a463f2;
    --color-accent-hover:    #bb85f5;
    --color-accent-active:   #8a48d6;
    --color-accent-soft:     rgba(164, 99, 242, 0.22);
    --color-accent-contrast: #ffffff;

    --color-success:         #5ed4a0;
    --color-warning-accent:  #e4b343;
    --color-danger-accent:   #e0576b;
    --color-info-accent:     #6aa3f0;
    --color-success-soft:    rgba(94, 212, 160, .16);
    --color-warning-soft:    rgba(228, 179, 67, .18);
    --color-danger-soft:     rgba(224, 87, 107, .18);
    --color-info-soft:       rgba(106, 163, 240, .18);

    --glass-bg:              rgba(27, 20, 48, 0.62);
    --glass-bg-strong:       rgba(27, 20, 48, 0.84);
    --glass-bg-sunken:       rgba(17, 12, 26, 0.55);
    --glass-border:          rgba(232, 228, 243, 0.08);
    --glass-border-soft:     rgba(232, 228, 243, 0.05);
}

/* -------- NORDIC FJORD (light) ------------------------------- */
[data-theme="nordic-fjord"] {
    color-scheme: light;

    --color-bg:              #edf1f4;
    --color-bg-elevated:     #e6ebf0;
    --color-surface:         #ffffff;
    --color-surface-hover:   #dfe7ee;
    --color-text:            #1d2a38;
    --color-text-muted:      #536170;
    --color-text-faint:      #8695a6;
    --color-text-inverse:    #ffffff;
    --color-border:          rgba(29, 42, 56, 0.08);
    --color-border-strong:   rgba(29, 42, 56, 0.18);
    --color-divider:         rgba(29, 42, 56, 0.04);

    --color-accent:          #3d6a8c;
    --color-accent-hover:    #5989ab;
    --color-accent-active:   #2d5775;
    --color-accent-soft:     rgba(61, 106, 140, 0.16);
    --color-accent-contrast: #ffffff;

    --color-success:         #4a9b7a;
    --color-warning-accent:  #c29340;
    --color-danger-accent:   #c25656;
    --color-info-accent:     #5989ab;
    --color-success-soft:    rgba(74, 155, 122, .14);
    --color-warning-soft:    rgba(194, 147, 64, .16);
    --color-danger-soft:     rgba(194, 86, 86, .14);
    --color-info-soft:       rgba(89, 137, 171, .16);

    --glass-bg:              rgba(255, 255, 255, 0.62);
    --glass-bg-strong:       rgba(255, 255, 255, 0.84);
    --glass-bg-sunken:       rgba(230, 235, 240, 0.62);
    --glass-border:          rgba(29, 42, 56, 0.08);
    --glass-border-soft:     rgba(29, 42, 56, 0.05);
}

/* -------- CITRUS PULSE (light) ------------------------------- */
[data-theme="citrus-pulse"] {
    color-scheme: light;

    --color-bg:              #fdfcf5;
    --color-bg-elevated:     #f7f5e8;
    --color-surface:         #ffffff;
    --color-surface-hover:   #f1efe0;
    --color-text:            #232a1a;
    --color-text-muted:      #5e6649;
    --color-text-faint:      #8e9678;
    --color-text-inverse:    #232a1a;
    --color-border:          rgba(35, 42, 26, 0.08);
    --color-border-strong:   rgba(35, 42, 26, 0.18);
    --color-divider:         rgba(35, 42, 26, 0.04);

    --color-accent:          #bfe04d;
    --color-accent-hover:    #d0ec6a;
    --color-accent-active:   #a5c63a;
    --color-accent-soft:     rgba(191, 224, 77, 0.22);
    --color-accent-contrast: #232a1a;

    --color-success:         #6bbf6e;
    --color-warning-accent:  #e4b343;
    --color-danger-accent:   #ff6b5b;
    --color-info-accent:     #4ea0e8;
    --color-success-soft:    rgba(107, 191, 110, .14);
    --color-warning-soft:    rgba(228, 179, 67, .16);
    --color-danger-soft:     rgba(255, 107, 91, .16);
    --color-info-soft:       rgba(78, 160, 232, .18);

    --glass-bg:              rgba(255, 255, 255, 0.62);
    --glass-bg-strong:       rgba(255, 255, 255, 0.84);
    --glass-bg-sunken:       rgba(247, 245, 232, 0.62);
    --glass-border:          rgba(35, 42, 26, 0.08);
    --glass-border-soft:     rgba(35, 42, 26, 0.05);
}

/* ============================================================
   Legacy alias bridge
   components.css/site.css/finder.css were written against the
   --color-background / --color-foreground / --color-primary
   naming. Here we wire those aliases to the new palette tokens
   so every palette affects the existing components automatically.
   ============================================================ */
:root {
    --color-background:        var(--color-bg);
    --color-background-soft:   var(--color-bg-elevated);
    --color-surface-alt:       var(--color-bg-elevated);
    --color-surface-sunken:    var(--color-bg-elevated);

    --color-foreground:        var(--color-text);
    --color-foreground-muted:  var(--color-text-muted);
    --color-foreground-subtle: var(--color-text-faint);
    --color-foreground-inverse:var(--color-text-inverse);

    --color-primary:           var(--color-accent);
    --color-primary-hover:     var(--color-accent-hover);
    --color-primary-active:    var(--color-accent-active);
    --color-on-primary:        var(--color-accent-contrast);

    --color-accent-muted:      var(--color-accent-soft);

    --color-focus-ring:        var(--color-accent-soft);

    --color-warning:           var(--color-warning-accent);
    --color-danger:            var(--color-danger-accent);
    --color-info:              var(--color-info-accent);

    --color-success-bg:        var(--color-success-soft);
    --color-warning-bg:        var(--color-warning-soft);
    --color-danger-bg:         var(--color-danger-soft);
    --color-info-bg:           var(--color-info-soft);
}