/* ================================================
   GLOBAL THEME TOKENS — Light / Dark
   ------------------------------------------------
   The active theme is set server-side on <html data-theme="light|dark">
   (see the `ui_theme` context processor in app.py) and switched live by
   static/js/theme.js from the user panel.

   All tokens are prefixed `--ui-` so they never collide with the
   per-page :root variables (--bg, --card, --text …) that still exist
   while pages are migrated.

   Data colors (fiber color codes, pole compliance markers, layer
   strokes, annotation colors) are intentionally NOT tokens — they must
   look the same in both themes.
   ================================================ */

:root,
[data-theme="light"] {
    color-scheme: light;

    /* Surfaces */
    --ui-bg:              #f3f4f6;   /* page background */
    --ui-surface:         #ffffff;   /* cards, panels, dropdowns, modals */
    --ui-surface-2:       #f9fafb;   /* subtle fill: buttons, rows, tabs */
    --ui-surface-3:       #f3f4f6;   /* hover on surface, chips */
    --ui-surface-4:       #e5e7eb;   /* hover on surface-2 */
    --ui-header-bg:       #f9fafb;   /* card / table header strips */

    /* Lines */
    --ui-border:          #e5e7eb;
    --ui-border-subtle:   #f3f4f6;   /* row separators inside panels */
    --ui-border-strong:   #d1d5db;   /* inputs, small buttons */

    /* Text */
    --ui-text:            #111827;
    --ui-text-2:          #374151;
    --ui-muted:           #6b7280;
    --ui-muted-2:         #9ca3af;

    /* Accent + status (base / soft fill / soft border / text-on-soft) */
    --ui-primary:         #2563eb;
    --ui-primary-hover:   #1d4ed8;
    --ui-primary-soft:    #dbeafe;
    --ui-primary-softer:  #eff6ff;
    --ui-primary-border:  #93c5fd;
    --ui-primary-text:    #1d4ed8;

    --ui-danger:          #dc2626;
    --ui-danger-hover:    #b91c1c;
    --ui-danger-soft:     #fee2e2;
    --ui-danger-border:   #fca5a5;
    --ui-danger-text:     #b91c1c;

    --ui-warn:            #f59e0b;
    --ui-warn-soft:       #fef3c7;
    --ui-warn-border:     #fcd34d;
    --ui-warn-text:       #92400e;

    --ui-success:         #10b981;
    --ui-success-soft:    #dcfce7;
    --ui-success-border:  #86efac;
    --ui-success-text:    #166534;

    --ui-info-soft:       #e0f2fe;
    --ui-info-border:     #7dd3fc;
    --ui-info-text:       #0369a1;

    --ui-orange-soft:     #ffedd5;
    --ui-orange-border:   #fdba74;
    --ui-orange-text:     #c2410c;

    --ui-violet-soft:     #ede9fe;
    --ui-violet-border:   #c4b5fd;
    --ui-violet-text:     #6d28d9;

    --ui-pink-soft:       #fce7f3;
    --ui-pink-border:     #f9a8d4;
    --ui-pink-text:       #9d174d;

    --ui-indigo-soft:     #e0e7ff;
    --ui-indigo-border:   #a5b4fc;
    --ui-indigo-text:     #3730a3;

    /* Controls */
    --ui-toggle-off:      #d1d5db;
    --ui-toggle-knob:     #ffffff;
    --ui-focus-ring:      rgba(37,99,235,0.15);

    /* Elevation */
    --ui-shadow:          rgba(0,0,0,0.15);
    --ui-shadow-strong:   rgba(0,0,0,0.25);
    --ui-overlay:         rgba(0,0,0,0.45);
    --ui-scroll-thumb:    rgba(0,0,0,0.2);
    --ui-scroll-thumb-hover: rgba(0,0,0,0.4);

    /* Topbar (navy bar with white buttons in light mode) */
    --ui-topbar-bg:              #2c3e50;
    --ui-topbar-border:          transparent;
    --ui-topbar-text:            #ffffff;
    --ui-topbar-divider:         rgba(255,255,255,0.2);
    --ui-topbar-btn-bg:          #ffffff;
    --ui-topbar-btn-border:      #dddddd;
    --ui-topbar-btn-text:        #333333;
    --ui-topbar-btn-hover-bg:    #f3f4f6;
    --ui-topbar-btn-hover-text:  #333333;
    --ui-topbar-btn-active-bg:   #dbeafe;
    --ui-topbar-btn-active-border: #93c5fd;
    --ui-topbar-btn-active-text: #1d4ed8;
    --ui-topbar-input-bg:        #ffffff;
    --ui-topbar-input-border:    #dddddd;
    --ui-topbar-input-text:      #111827;
}

/* Dark values are the admin panel's original palette. */
[data-theme="dark"] {
    color-scheme: dark;

    --ui-bg:              #0f1117;
    --ui-surface:         #1a1d27;
    --ui-surface-2:       #1f2333;
    --ui-surface-3:       #232840;
    --ui-surface-4:       #2d3360;
    --ui-header-bg:       #13161f;

    --ui-border:          #2d3148;
    --ui-border-subtle:   #242838;
    --ui-border-strong:   #3a3f5c;

    --ui-text:            #e8eaf6;
    --ui-text-2:          #c7cbe0;
    --ui-muted:           #9ca3af;
    --ui-muted-2:         #6b7280;

    --ui-primary:         #3b82f6;
    --ui-primary-hover:   #2563eb;
    --ui-primary-soft:    rgba(59,130,246,0.15);
    --ui-primary-softer:  rgba(59,130,246,0.08);
    --ui-primary-border:  #3b82f6;
    --ui-primary-text:    #93c5fd;

    --ui-danger:          #ef4444;
    --ui-danger-hover:    #dc2626;
    --ui-danger-soft:     rgba(239,68,68,0.15);
    --ui-danger-border:   rgba(239,68,68,0.4);
    --ui-danger-text:     #fca5a5;

    --ui-warn:            #f59e0b;
    --ui-warn-soft:       rgba(245,158,11,0.15);
    --ui-warn-border:     rgba(245,158,11,0.4);
    --ui-warn-text:       #fcd34d;

    --ui-success:         #10b981;
    --ui-success-soft:    rgba(16,185,129,0.15);
    --ui-success-border:  rgba(16,185,129,0.4);
    --ui-success-text:    #6ee7b7;

    --ui-info-soft:       rgba(14,165,233,0.15);
    --ui-info-border:     rgba(14,165,233,0.4);
    --ui-info-text:       #7dd3fc;

    --ui-orange-soft:     rgba(249,115,22,0.15);
    --ui-orange-border:   rgba(249,115,22,0.4);
    --ui-orange-text:     #fdba74;

    --ui-violet-soft:     rgba(167,139,250,0.15);
    --ui-violet-border:   rgba(167,139,250,0.4);
    --ui-violet-text:     #c4b5fd;

    --ui-pink-soft:       rgba(236,72,153,0.15);
    --ui-pink-border:     rgba(236,72,153,0.4);
    --ui-pink-text:       #f9a8d4;

    --ui-indigo-soft:     rgba(99,102,241,0.15);
    --ui-indigo-border:   rgba(99,102,241,0.4);
    --ui-indigo-text:     #a5b4fc;

    --ui-toggle-off:      #3a3f5c;
    --ui-toggle-knob:     #e8eaf6;
    --ui-focus-ring:      rgba(59,130,246,0.3);

    --ui-shadow:          rgba(0,0,0,0.5);
    --ui-shadow-strong:   rgba(0,0,0,0.6);
    --ui-overlay:         rgba(0,0,0,0.6);
    --ui-scroll-thumb:    rgba(255,255,255,0.15);
    --ui-scroll-thumb-hover: rgba(255,255,255,0.3);

    --ui-topbar-bg:              #13161f;
    --ui-topbar-border:          #2d3148;
    --ui-topbar-text:            #e8eaf6;
    --ui-topbar-divider:         #2d3148;
    --ui-topbar-btn-bg:          #232840;
    --ui-topbar-btn-border:      #2d3148;
    --ui-topbar-btn-text:        #9ca3af;
    --ui-topbar-btn-hover-bg:    #2d3360;
    --ui-topbar-btn-hover-text:  #e8eaf6;
    --ui-topbar-btn-active-bg:   #1e3a6e;
    --ui-topbar-btn-active-border: #3b82f6;
    --ui-topbar-btn-active-text: #93c5fd;
    --ui-topbar-input-bg:        #1a1d27;
    --ui-topbar-input-border:    #2d3148;
    --ui-topbar-input-text:      #e8eaf6;
}