/* ── Shared design tokens for GlidePlan and GlideLog ────────────────────────
 *
 * Loaded after the Shoelace light/dark theme sheets and before each app's own
 * styles, so every colour in both apps comes from this one file:
 *   - the semantic app tokens (--primary-color …) used by GlidePlan's CSS,
 *   - the --gl-* aliases used by GlideLog's templates,
 *   - the Shoelace palette (--sl-color-*) so <sl-button variant="primary">,
 *     <sl-badge>, <sl-alert> … use the same blue/green/red as everything else.
 *
 * GlideLog serves its own copy at glidelog/static/css/theme-tokens.css; a test
 * asserts the two files stay identical. Edit this file, then copy it over.
 */

:root {
    /* Semantic tokens (light) */
    --primary-color:   #2563eb;
    --primary-hover:   #1d4ed8;
    --success-color:   #059669;
    --success-hover:   #047857;
    --danger-color:    #dc2626;
    --danger-hover:    #b91c1c;
    --warning-color:   #d97706;
    --warning-hover:   #b45309;
    --info-color:      #0891b2;
    --info-hover:      #0e7490;
    --secondary-color: #64748b;
    --secondary-hover: #475569;

    --background:      #f8fafc;
    --surface:         #ffffff;
    --surface-hover:   #f1f5f9;
    --border:          #e2e8f0;
    --text-primary:    #1e293b;
    --text-secondary:  #64748b;

    --sidebar-bg:      #0f172a;
    --sidebar-text:    #94a3b8;
    --sidebar-hover:   rgba(255, 255, 255, 0.07);
    --sidebar-active:  #2563eb;

    --shadow:    0 1px 3px 0 rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

    --radius:    10px;
    --radius-sm: 8px;

    /* GlideLog aliases */
    --gl-bg:            var(--background);
    --gl-surface:       var(--surface);
    --gl-border:        var(--border);
    --gl-text:          var(--text-primary);
    --gl-muted:         var(--text-secondary);
    --gl-primary:       var(--primary-color);
    --gl-primary-h:     var(--primary-hover);
    --gl-danger:        var(--danger-color);
    --gl-warning:       var(--warning-color);
    --gl-success:       var(--success-color);
    --gl-info:          var(--info-color);
    --gl-sidebar-bg:    var(--sidebar-bg);
    --gl-sidebar-text:  var(--sidebar-text);
    --gl-sidebar-hover: var(--sidebar-hover);
    --gl-sidebar-active:var(--sidebar-active);
    --gl-radius:        var(--radius);
    --gl-radius-sm:     var(--radius-sm);
    --gl-shadow:        var(--shadow);
    --gl-shadow-md:     var(--shadow-md);

    /* Shoelace palette — blue / emerald / red / amber / slate */
    --sl-color-primary-50:  #eff6ff;
    --sl-color-primary-100: #dbeafe;
    --sl-color-primary-200: #bfdbfe;
    --sl-color-primary-300: #93c5fd;
    --sl-color-primary-400: #60a5fa;
    --sl-color-primary-500: #3b82f6;
    --sl-color-primary-600: #2563eb;
    --sl-color-primary-700: #1d4ed8;
    --sl-color-primary-800: #1e40af;
    --sl-color-primary-900: #1e3a8a;
    --sl-color-primary-950: #172554;

    --sl-color-success-50:  #ecfdf5;
    --sl-color-success-100: #d1fae5;
    --sl-color-success-200: #a7f3d0;
    --sl-color-success-300: #6ee7b7;
    --sl-color-success-400: #34d399;
    --sl-color-success-500: #10b981;
    --sl-color-success-600: #059669;
    --sl-color-success-700: #047857;
    --sl-color-success-800: #065f46;
    --sl-color-success-900: #064e3b;
    --sl-color-success-950: #022c22;

    --sl-color-danger-50:  #fef2f2;
    --sl-color-danger-100: #fee2e2;
    --sl-color-danger-200: #fecaca;
    --sl-color-danger-300: #fca5a5;
    --sl-color-danger-400: #f87171;
    --sl-color-danger-500: #ef4444;
    --sl-color-danger-600: #dc2626;
    --sl-color-danger-700: #b91c1c;
    --sl-color-danger-800: #991b1b;
    --sl-color-danger-900: #7f1d1d;
    --sl-color-danger-950: #450a0a;

    --sl-color-warning-50:  #fffbeb;
    --sl-color-warning-100: #fef3c7;
    --sl-color-warning-200: #fde68a;
    --sl-color-warning-300: #fcd34d;
    --sl-color-warning-400: #fbbf24;
    --sl-color-warning-500: #f59e0b;
    --sl-color-warning-600: #d97706;
    --sl-color-warning-700: #b45309;
    --sl-color-warning-800: #92400e;
    --sl-color-warning-900: #78350f;
    --sl-color-warning-950: #451a03;

    --sl-color-neutral-0:    #ffffff;
    --sl-color-neutral-50:   #f8fafc;
    --sl-color-neutral-100:  #f1f5f9;
    --sl-color-neutral-200:  #e2e8f0;
    --sl-color-neutral-300:  #cbd5e1;
    --sl-color-neutral-400:  #94a3b8;
    --sl-color-neutral-500:  #64748b;
    --sl-color-neutral-600:  #475569;
    --sl-color-neutral-700:  #334155;
    --sl-color-neutral-800:  #1e293b;
    --sl-color-neutral-900:  #0f172a;
    --sl-color-neutral-950:  #020617;
    --sl-color-neutral-1000: #000000;

    --sl-focus-ring-color: var(--sl-color-primary-500);
    --sl-input-border-radius-medium: var(--radius-sm);
    --sl-border-radius-medium: var(--radius-sm);
    --sl-border-radius-large: var(--radius);
}

/* Shoelace's dark sheet uses `:root.sl-theme-dark`; match its specificity. */
:root.sl-theme-dark {
    --primary-color:   #3b82f6;
    --primary-hover:   #60a5fa;
    --success-color:   #10b981;
    --success-hover:   #34d399;
    --danger-color:    #ef4444;
    --danger-hover:    #f87171;
    --warning-color:   #f59e0b;
    --warning-hover:   #fbbf24;
    --info-color:      #06b6d4;
    --info-hover:      #22d3ee;
    --secondary-color: #94a3b8;
    --secondary-hover: #cbd5e1;

    --background:      #0f172a;
    --surface:         #1e293b;
    --surface-hover:   #273449;
    --border:          #334155;
    --text-primary:    #e2e8f0;
    --text-secondary:  #94a3b8;

    --sidebar-bg:      #0b1220;
    --sidebar-active:  #2563eb;

    --shadow:    0 1px 3px 0 rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);

    /* Inverted scales: *-600 stays the "main" shade but one step lighter. */
    --sl-color-primary-50:  #172554;
    --sl-color-primary-100: #1e3a8a;
    --sl-color-primary-200: #1e40af;
    --sl-color-primary-300: #1d4ed8;
    --sl-color-primary-400: #2563eb;
    --sl-color-primary-500: #3b82f6;
    --sl-color-primary-600: #3b82f6;
    --sl-color-primary-700: #60a5fa;
    --sl-color-primary-800: #93c5fd;
    --sl-color-primary-900: #bfdbfe;
    --sl-color-primary-950: #dbeafe;

    --sl-color-success-50:  #022c22;
    --sl-color-success-100: #064e3b;
    --sl-color-success-200: #065f46;
    --sl-color-success-300: #047857;
    --sl-color-success-400: #059669;
    --sl-color-success-500: #10b981;
    --sl-color-success-600: #10b981;
    --sl-color-success-700: #34d399;
    --sl-color-success-800: #6ee7b7;
    --sl-color-success-900: #a7f3d0;
    --sl-color-success-950: #d1fae5;

    --sl-color-danger-50:  #450a0a;
    --sl-color-danger-100: #7f1d1d;
    --sl-color-danger-200: #991b1b;
    --sl-color-danger-300: #b91c1c;
    --sl-color-danger-400: #dc2626;
    --sl-color-danger-500: #ef4444;
    --sl-color-danger-600: #ef4444;
    --sl-color-danger-700: #f87171;
    --sl-color-danger-800: #fca5a5;
    --sl-color-danger-900: #fecaca;
    --sl-color-danger-950: #fee2e2;

    --sl-color-warning-50:  #451a03;
    --sl-color-warning-100: #78350f;
    --sl-color-warning-200: #92400e;
    --sl-color-warning-300: #b45309;
    --sl-color-warning-400: #d97706;
    --sl-color-warning-500: #f59e0b;
    --sl-color-warning-600: #f59e0b;
    --sl-color-warning-700: #fbbf24;
    --sl-color-warning-800: #fcd34d;
    --sl-color-warning-900: #fde68a;
    --sl-color-warning-950: #fef3c7;

    --sl-color-neutral-0:    #1e293b;
    --sl-color-neutral-50:   #0f172a;
    --sl-color-neutral-100:  #1e293b;
    --sl-color-neutral-200:  #273449;
    --sl-color-neutral-300:  #334155;
    --sl-color-neutral-400:  #475569;
    --sl-color-neutral-500:  #64748b;
    --sl-color-neutral-600:  #94a3b8;
    --sl-color-neutral-700:  #cbd5e1;
    --sl-color-neutral-800:  #e2e8f0;
    --sl-color-neutral-900:  #f1f5f9;
    --sl-color-neutral-950:  #f8fafc;
    --sl-color-neutral-1000: #ffffff;
}

/* Semantic text helpers shared by both apps */
.text-success { color: var(--success-color); }
.text-danger, .text-error { color: var(--danger-color); }
.text-warning { color: var(--warning-color); }
.text-muted { color: var(--text-secondary); }