/* ============================================================================
   Dark Theme — overrides token values for dark appearance.

   To enable: set data-theme="dark" on the <html> element.
   Every token used in components is overridden here.
   ============================================================================ */

[data-theme="dark"] {
    color-scheme: dark;

    /* ── Brand / Primary (Auger Green, lighter variants for dark bg) ─────── */
    --token-brand:              #9dd654; /* primary-lighter */
    --token-brand-hover:        #8CC640; /* primary-color */
    --token-brand-dark:         #5a9216; /* primary-dark */
    --token-brand-light:        #1e3a1e; /* dark-mode subtle bg */
    --token-brand-lighter:      #9dd654;
    --token-brand-rgb:          157, 214, 84;

    /* Accent (Auger Purple, lighter per Spark dark theme) */
    --token-accent:             #a78bfa; /* Spark dark secondary */
    --token-accent-hover:       #8950FC;
    --token-accent-dark:        #4a148c;
    --token-accent-light:       #2d1b47; /* dark-mode subtle bg */
    --token-accent-rgb:         167, 139, 250;

    /* ── Success / Green ─────────────────────────────────────────────────── */
    --token-success:            #34d058;
    --token-success-hover:      #28a745;
    --token-success-dark:       #4ade80;
    --token-success-icon:       #4ade80;
    --token-success-light-bg:   #064e3b;
    --token-success-light-text: #6ee7b7;
    --token-success-border:     #065f46;
    --token-success-border-light:#065f46;
    --token-success-badge-bg:   #064e3b;
    --token-success-alert-bg:   #0d3b2e;
    --token-success-alert-border:#065f46;
    --token-success-rgb:        52, 208, 88;

    /* ── Warning / Orange (Spark-aligned, dark-mode variant) ─────────────── */
    --token-warning:            #f97316;
    --token-warning-bg:         #431407;
    --token-warning-text:       #fdba74;
    --token-warning-border:     #7c2d12;
    --token-warning-light-bg:   #422006;
    --token-warning-dark-bg:    #3b1a00;
    --token-warning-dark-border:#9a3412;
    --token-warning-dark-text:  #fed7aa;
    --token-warning-rgb:        249, 115, 22;

    /* ── Danger / Red ────────────────────────────────────────────────────── */
    --token-danger:             #f87171;
    --token-danger-hover:       #ef4444;
    --token-danger-dark:        #dc2626;
    --token-danger-text:        #fca5a5;
    --token-danger-bg:          #450a0a;
    --token-danger-border:      #7f1d1d;
    --token-danger-light-bg:    #3b0a0a;
    --token-danger-light-border:#991b1b;
    --token-danger-light-border-alt:#991b1b;

    /* ── Info (Auger secondary purple — dark mode) ───────────────────────── */
    --token-info:               #a78bfa;
    --token-info-hover:         #8950FC;
    --token-info-bg:            #2d1b47;
    --token-info-text:          #d4bcff;
    --token-info-border:        #4a148c;
    --token-info-light-bg:      #2d1b47;
    --token-info-alt-bg:        #1e1033;
    --token-info-alt-text:      #d4bcff;
    --token-info-alt-border:    #4a148c;

    /* ── Neutral / Grey Scale ────────────────────────────────────────────── */
    --token-text:               #e2e8f0;
    --token-text-secondary:     #cbd5e1;
    --token-text-muted:         #94a3b8;
    --token-text-light:         #94a3b8;
    --token-text-lighter:       #94a3b8;
    --token-text-label:         #94a3b8;
    --token-text-faint:         #64748b;
    --token-text-input:         #cbd5e1;
    --token-text-dark:          #cbd5e1;
    --token-text-heading:       #f1f5f9;
    --token-text-subtle:        #94a3b8;
    --token-text-dim:           #64748b;

    /* ── Backgrounds ─────────────────────────────────────────────────────── */
    --token-bg-page:            #0f172a;
    --token-bg-light:           #1e293b;
    --token-bg-lighter:         #1e293b;
    --token-bg-card-header:     #1e293b;
    --token-bg-muted:           #334155;
    --token-bg-input:           #1e293b;

    --token-surface:            #1e293b;

    /* ── Borders ─────────────────────────────────────────────────────────── */
    --token-border:             #334155;
    --token-border-light:       #334155;
    --token-border-lighter:     #1e293b;
    --token-border-input:       #475569;
    --token-border-medium:      #475569;
    --token-border-focus:       rgba(157, 214, 84, .35);

    /* ── Icons ───────────────────────────────────────────────────────────── */
    --token-icon-muted:         #475569;
    --token-icon-faint:         #334155;

    /* ── Shadows ─────────────────────────────────────────────────────────── */
    --token-shadow-sm:          0 1px 3px rgba(0, 0, 0, .3);
    --token-shadow:             0 2px 6px rgba(0, 0, 0, .3);
    --token-shadow-md:          0 2px 8px rgba(0, 0, 0, .3);
    --token-shadow-lg:          0 20px 40px rgba(0, 0, 0, .4);
    --token-shadow-card:        0 4px 12px rgba(0, 0, 0, .3);

    /* ── Gradients ───────────────────────────────────────────────────────── */
    --token-gradient-brand:     linear-gradient(135deg, #8CC640, #5a9216);
    --token-gradient-brand-hover:linear-gradient(135deg, #7ab230, #4a7e12);
    --token-gradient-success:   linear-gradient(135deg, #22c55e, #16a34a);
    --token-gradient-success-hover:linear-gradient(135deg, #16a34a, #15803d);
    --token-gradient-accent:    linear-gradient(135deg, #a78bfa, #8950FC);
    --token-gradient-accent-hover:linear-gradient(135deg, #8950FC, #6d3fd4);
    --token-gradient-hero:      linear-gradient(135deg, #0f172a 0%, #1a1433 100%);
    --token-gradient-progress:  linear-gradient(90deg, #9dd654, #8CC640);
    --token-gradient-danger:    linear-gradient(135deg, #f87171, #ef4444);
    --token-gradient-danger-hover:linear-gradient(135deg, #ef4444, #dc2626);

    /* ── Scrollbar ───────────────────────────────────────────────────────── */
    --token-scrollbar-track:    #1e293b;
    --token-scrollbar-thumb:    #475569;

    /* ── Misc / app.css legacy (re-pointed at Auger palette) ─────────────── */
    --token-link:               #a78bfa;
    --token-focus-ring:         #9dd654;
    --token-valid-outline:      #9dd654;
    --token-invalid-outline:    #f87171;

    /* ── Extended palette (aligned to brand green) ──────────────────────── */
    --token-emerald:             #9dd654;
    --token-emerald-hover:       #8CC640;
    --token-sky:                 #9dd654;
    --token-sky-hover:           #8CC640;

    /* ── Auger design palette — dark variants ──────────────────────────── */
    --auger-navy:                #15414B; /* slightly lighter navy so avatars stay visible on dark page bg */
    --auger-page-bg-warm:        #0F1B1F; /* dark equivalent of warm page bg */
}