/* MAPTRIUM Admin Control · design tokens · V6 — Luminous Slate
 * Signature: layered sapphire/slate · champagne gold · restrained radial illumination
 */

/* Fonts self-hosted · see fonts.css (loaded in index.html before tokens.css) */

:root {
  /* ---- Foundational depth ---- */
  --canvas:            #0A1728;
  --sidebar:           #071527;
  --header:            #0D2138;

  /* ---- Three surface levels (clearly separated) ---- */
  --surface-1:         #112740;     /* standard card */
  --surface-2:         #18334F;     /* emphasized / analytic panel */
  --surface-3:         #234361;     /* inner raised detail / rows */
  --surface-graphite:  #20313F;     /* neutral break from all-blue */
  --surface-hover:     #2C4B67;

  /* ---- Strokes + highlights ---- */
  --stroke:            rgba(126, 176, 214, 0.27);
  --stroke-soft:       rgba(126, 176, 214, 0.14);
  --inner-highlight:   rgba(241, 250, 255, 0.10);

  /* ---- Brand + meaning ---- */
  --gold:              #E9BC61;
  --gold-light:        #F9D78D;
  --cyan:              #34BEF4;
  --cyan-light:        #79DCFF;
  --violet:            #A58BFF;
  --emerald:           #38D59B;
  --coral:             #FF7280;
  --amber:             #F5B85C;

  /* ---- Typography ---- */
  --text-1:            #F7FAFF;
  --text-2:            #CBD8E7;
  --text-3:            #A1B7CE;

  /* ---- Layout ---- */
  --radius-card:       14px;
  --radius-control:    9px;
  --radius-pill:       999px;
  --space-page:        24px;
  --space-grid:        16px;
  --sidebar-width:     230px;
  --header-height:     64px;

  /* ---- Shadows (card lift + inner highlight) ---- */
  --shadow-card:       0 8px 26px rgba(0,0,0,0.22), inset 0 1px 0 var(--inner-highlight);
  --shadow-kpi:        0 12px 24px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.07);
  --shadow-lifted:     0 18px 40px rgba(0,0,0,0.35), inset 0 1px 0 var(--inner-highlight);
  --shadow-focus:      0 0 0 3px rgba(233,188,97,0.28);

  /* ---- Backwards-compat aliases (other CSS still reads these names) ---- */
  --bg-main:           var(--canvas);
  --bg-sidebar:        var(--sidebar);
  --bg-header:         var(--header);
  --surface-primary:   var(--surface-1);
  --surface-secondary: var(--surface-2);
  --surface-elevated:  var(--surface-3);
  --border-default:    rgba(126, 176, 214, 0.27);
  --border-subtle:     rgba(126, 176, 214, 0.14);
  --border-focus:      var(--gold);
  --brand-gold:        var(--gold);
  --brand-gold-hover:  var(--gold-light);
  --brand-navy:        #032953;
  --accent-blue:       var(--cyan);
  --accent-purple:     var(--violet);
  --accent-teal:       var(--emerald);
  --status-success:    var(--emerald);
  --status-warning:    var(--amber);
  --status-critical:   var(--coral);
  --text-primary:      var(--text-1);
  --text-secondary:    var(--text-2);
  --text-muted:        var(--text-3);
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: var(--radius-card);
  --radius-button: var(--radius-control); --radius-input: var(--radius-control);
  --canvas: var(--canvas); --shell: var(--sidebar); --surface: var(--surface-1);
  --raised: var(--surface-2); --sunken: var(--surface-3);
  --border: rgba(126, 176, 214, 0.27); --border-strong: rgba(126, 176, 214, 0.35);
  --brand-navy-hi: var(--cyan); --status-ok: var(--emerald);
  --status-warn: var(--amber); --status-err: var(--coral); --status-info: var(--cyan);
  --brand-red: var(--coral); --text-on-brand: #122337;
  --shadow-1: var(--shadow-card); --shadow-2: var(--shadow-lifted);
  --tint-info-edge: var(--cyan); --tint-purple-edge: var(--violet);
  --tint-ok-edge: var(--emerald); --tint-err-edge: var(--coral);
  --code-bg: #04111f; --code-fg: #9EEAC1;
  --header-h: var(--header-height);
  --sidebar-w: var(--sidebar-width);
  --nav-item-h: 38px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px;

  /* ---- Fonts ---- */
  --font-sans: "Plus Jakarta Sans", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --fz-xs: 11px; --fz-sm: 12px; --fz-base: 14px; --fz-md: 15px;
  --fz-lg: 17px; --fz-xl: 20px; --fz-2xl: 28px; --fz-kpi: 34px;

  color-scheme: dark;
}

body.theme-light {
  --canvas:           #F3F6FA;
  --sidebar:          #FFFFFF;
  --header:           #FFFFFF;
  --surface-1:        #FFFFFF;
  --surface-2:        #FAFBFD;
  --surface-3:        #F2F5F9;
  --surface-graphite: #F7F9FC;
  --surface-hover:    #ECF0F5;
  --stroke:           rgba(16,34,53,0.15);
  --stroke-soft:      rgba(16,34,53,0.08);
  --text-1:           #0A1728;
  --text-2:           #4A5A74;
  --text-3:           #6E7E97;
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Slim scrollbar */
* { scrollbar-width: thin; scrollbar-color: rgba(126,176,214,0.25) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(126,176,214,0.22); border-radius: 10px;
                              border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--gold);
                                     border: 2px solid transparent; background-clip: padding-box; }