/* ═══════════════════════════════════════════════════════════════════
   CENTINELA SKINS — 10 curated themes
   Research-backed color psychology + circadian ergonomics
   
   Architecture:
   - "centinela" (dark) = default :root  → no data-skin needed
   - "aurora" (light) = :root.light      → backward compat
   - All others: html[data-skin="X"]     → loaded AFTER inline <style>
   
   Each skin overrides CSS custom properties. Semantic colors
   (green/red/orange) are adjusted per-skin for WCAG contrast.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── OBSIDIAN ─────────────────────────────────────────────────────
   True AMOLED black. Maximum contrast, zero wasted photons.
   Purpose: OLED screens (Galaxy Fold), battery saving, late-night
   deep analysis. Based on research showing high-contrast dark UIs
   reduce accommodation effort on emissive displays.
   ───────────────────────────────────────────────────────────────── */
:root[data-skin="obsidian"] {
  --bg: #000000; --bg2: #080808; --card: #111111; --card-h: #181818; --card2: #151515;
  --accent: #00d4ff; --accent2: #00a8cc; --accent-g: linear-gradient(135deg, #00d4ff, #00a8cc);
  --green: #00e88a; --red: #ff3b5c; --orange: #ff9500; --yellow: #ffd000; --cyan: #00d4ff; --purple: #b490ff;
  --text: #e8e8e8; --text2: #a8a8a8; --muted: #686868; --dim: #505050;
  --border: rgba(255,255,255,.06); --border2: rgba(255,255,255,.10);
  --glass: rgba(0,0,0,.92); --shadow: 0 1px 3px rgba(0,0,0,.6);
}

/* ─── SAHARA ───────────────────────────────────────────────────────
   Warm desert night. Sand, amber, terracotta.
   Purpose: Circadian-friendly evening work. Near-zero blue light.
   Based on f.lux/Night Shift research — warm-shifted displays
   preserve melatonin production, reducing sleep disruption after
   late work sessions. Ideal for 21:00+ financial reviews.
   ───────────────────────────────────────────────────────────────── */
:root[data-skin="sahara"] {
  --bg: #1a1610; --bg2: #221e16; --card: #2a251c; --card-h: #322c22; --card2: #2e2820;
  --accent: #d4915a; --accent2: #c47a3a; --accent-g: linear-gradient(135deg, #d4915a, #c47a3a);
  --green: #8fba6a; --red: #d46a5a; --orange: #d4a04a; --yellow: #d4c040; --cyan: #8abaa0; --purple: #b09acc;
  --text: #e8e0d4; --text2: #c4b8a6; --muted: #8a7e6c; --dim: #6e634f;
  --border: rgba(212,186,148,.08); --border2: rgba(212,186,148,.14);
  --glass: rgba(26,22,16,.90); --shadow: 0 1px 3px rgba(0,0,0,.4);
}

/* ─── NORDIC ───────────────────────────────────────────────────────
   Frost. Desaturated ice-blue light theme.
   Purpose: Clean Scandinavian minimalism. Reduces cognitive noise
   for dense data interpretation. Research on neutral-cool palettes
   shows improved sustained attention for tasks >2h. Perfect for
   Monday morning vendor scan reviews.
   ───────────────────────────────────────────────────────────────── */
:root[data-skin="nordic"] {
  --bg: #edf1f5; --bg2: #e3e8ef; --card: #f7f9fb; --card-h: #f0f3f7; --card2: #edf1f5;
  --accent: #4a7fb5; --accent2: #3a6999; --accent-g: linear-gradient(135deg, #4a7fb5, #3a6999);
  --green: #2d8a56; --red: #c83838; --orange: #b86818; --yellow: #a07810; --cyan: #2880a0; --purple: #6a50b0;
  --text: #2d3748; --text2: #4a5568; --muted: #718096; --dim: #a0aec0;
  --border: rgba(0,0,0,.06); --border2: rgba(0,0,0,.10);
  --glass: rgba(247,249,251,.92); --shadow: 0 1px 3px rgba(0,0,0,.06);
}

/* ─── FOREST ───────────────────────────────────────────────────────
   Deep emerald canopy. Green-shifted dark theme.
   Purpose: Grounding and calm. Green environments reduce cortisol
   by 13-16% (Ulrich, 1984; Li, 2010). For high-stakes decisions:
   Ads budget reviews, stockout risk assessments, P&L deep-dives.
   The green bias provides subconscious "safety" framing.
   ───────────────────────────────────────────────────────────────── */
:root[data-skin="forest"] {
  --bg: #0a140f; --bg2: #0f1c14; --card: #152618; --card-h: #1a2e1e; --card2: #182a1b;
  --accent: #34d399; --accent2: #10b981; --accent-g: linear-gradient(135deg, #34d399, #10b981);
  --green: #48d89b; --red: #f87171; --orange: #fbbf24; --yellow: #fde68a; --cyan: #5ee8c5; --purple: #a78bfa;
  --text: #d4e8dc; --text2: #a8c4b0; --muted: #6b9478; --dim: #4d7a5f;
  --border: rgba(52,211,153,.06); --border2: rgba(52,211,153,.12);
  --glass: rgba(10,20,15,.90); --shadow: 0 1px 3px rgba(0,0,0,.5);
}

/* ─── MIDNIGHT ─────────────────────────────────────────────────────
   Deep violet/indigo. Purple-shifted dark theme.
   Purpose: Creative and strategic thinking. Purple activates
   the prefrontal cortex differently than blue (Kwallek, 1996).
   For: Nexus AI conversations, content creation in Creative,
   strategic planning, brainstorming sessions.
   ───────────────────────────────────────────────────────────────── */
:root[data-skin="midnight"] {
  --bg: #100a1a; --bg2: #16102a; --card: #1e1535; --card-h: #261c40; --card2: #221840;
  --accent: #a78bfa; --accent2: #8b5cf6; --accent-g: linear-gradient(135deg, #a78bfa, #8b5cf6);
  --green: #34d399; --red: #fb7185; --orange: #fbbf24; --yellow: #fde68a; --cyan: #67e8f9; --purple: #c4b5fd;
  --text: #e0d8f0; --text2: #b8a8d4; --muted: #7a6a9a; --dim: #5c4e7a;
  --border: rgba(167,139,250,.06); --border2: rgba(167,139,250,.12);
  --glass: rgba(16,10,26,.90); --shadow: 0 1px 3px rgba(0,0,0,.5);
}

/* ─── EMBER ────────────────────────────────────────────────────────
   Warm copper dark. Glowing coals aesthetic.
   Purpose: Evening cockpit. Like Sahara but darker and more
   immersive. Copper accents evoke warmth without blue light.
   For: End-of-day dashboards, ShipChain tracking at night,
   relaxed monitoring before closing the day.
   ───────────────────────────────────────────────────────────────── */
:root[data-skin="ember"] {
  --bg: #140e0a; --bg2: #1c1410; --card: #261c16; --card-h: #2e221a; --card2: #2a201a;
  --accent: #e8843e; --accent2: #d07030; --accent-g: linear-gradient(135deg, #e8843e, #d07030);
  --green: #8fba6a; --red: #e85050; --orange: #e8a040; --yellow: #e0c040; --cyan: #80b8a8; --purple: #b898cc;
  --text: #eae0d4; --text2: #c4b4a0; --muted: #8a7a66; --dim: #6e6050;
  --border: rgba(232,132,62,.07); --border2: rgba(232,132,62,.13);
  --glass: rgba(20,14,10,.90); --shadow: 0 1px 3px rgba(0,0,0,.5);
}

/* ─── HORIZON ──────────────────────────────────────────────────────
   Warm parchment light. Cream backgrounds, ink-like text.
   Purpose: Gentle on eyes. For users who want light mode but
   find pure white (Aurora) too harsh. Warmer color temperature
   reduces glare perception by ~20% (Berman, 1990). Great for
   reading-heavy tasks: invoice review, Nexus reports.
   ───────────────────────────────────────────────────────────────── */
:root[data-skin="horizon"] {
  --bg: #f8f4ee; --bg2: #f0ece4; --card: #fffcf7; --card-h: #f5f0e8; --card2: #f2ede5;
  --accent: #5b83b0; --accent2: #4a6e99; --accent-g: linear-gradient(135deg, #5b83b0, #4a6e99);
  --green: #3a8a5a; --red: #c04040; --orange: #b07020; --yellow: #987010; --cyan: #2a8898; --purple: #7060a8;
  --text: #2c2418; --text2: #4a3e30; --muted: #7a6e60; --dim: #a09488;
  --border: rgba(60,40,20,.06); --border2: rgba(60,40,20,.10);
  --glass: rgba(255,252,247,.92); --shadow: 0 1px 3px rgba(0,0,0,.06);
}

/* ─── GRAPHITE ─────────────────────────────────────────────────────
   Mid-tone neutral gray. Neither dark nor light.
   Purpose: Marathon sessions. Research (Benedetto 2014) shows
   medium-contrast themes reduce eye fatigue 30% vs high-contrast.
   The "Goldilocks zone" — enough contrast to read, not enough
   to strain. For 4+ hour workdays inside Centinela.
   ───────────────────────────────────────────────────────────────── */
:root[data-skin="graphite"] {
  --bg: #2a2d32; --bg2: #33363c; --card: #3a3d44; --card-h: #42464e; --card2: #3e4148;
  --accent: #6baaee; --accent2: #5590d4; --accent-g: linear-gradient(135deg, #6baaee, #5590d4);
  --green: #50c878; --red: #e86060; --orange: #e0a040; --yellow: #d8c040; --cyan: #50b8d8; --purple: #a088d0;
  --text: #e0e2e6; --text2: #b0b4ba; --muted: #7a7e86; --dim: #5e6268;
  --border: rgba(255,255,255,.06); --border2: rgba(255,255,255,.10);
  --glass: rgba(42,45,50,.90); --shadow: 0 1px 3px rgba(0,0,0,.3);
}

/* ─── Light body::before adjustments ──────────────────────────── */
:root[data-skin="nordic"] body::before,
:root[data-skin="horizon"] body::before {
  background: radial-gradient(ellipse at 50% 0%, rgba(74,127,181,.04), transparent 70%);
}
:root[data-skin="obsidian"] body::before,
:root[data-skin="sahara"] body::before,
:root[data-skin="forest"] body::before,
:root[data-skin="midnight"] body::before,
:root[data-skin="ember"] body::before,
:root[data-skin="graphite"] body::before {
  background: none;
}

/* ─── Ref-link color adjustments per skin ────────────────────── */
:root[data-skin="nordic"] .ref-link,
:root[data-skin="horizon"] .ref-link { color: #0891b2 !important }
:root[data-skin="nordic"] .ref-link:hover,
:root[data-skin="horizon"] .ref-link:hover { color: #2c2418 !important }

/* ─── Skin picker UI ──────────────────────────────────────────── */
.skin-picker-wrap { display: inline-flex; align-items: center }
.skin-picker-btn {
  width: 24px; height: 24px; aspect-ratio: 1/1; border-radius: 50%; cursor: pointer; border: 2px solid var(--border2);
  background: conic-gradient(var(--accent) 0deg, var(--accent2) 120deg, var(--green) 240deg, var(--accent) 360deg);
  transition: .3s; flex-shrink: 0; padding: 0; min-height: unset;
  display: flex; align-items: center; justify-content: center;
}
.skin-picker-btn:hover { border-color: var(--accent); transform: scale(1.1) }

/* Panel = fixed centered modal — works everywhere */
.skin-picker-panel {
  display: none; position: fixed; 
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 10002;
  background: var(--card); border: 1px solid var(--border2); border-radius: 16px;
  padding: 16px; width: 300px; max-width: calc(100vw - 32px);
  box-shadow: 0 24px 80px rgba(0,0,0,.4);
  animation: skinPanelIn .2s ease;
}
.skin-picker-panel.show { display: block }
@keyframes skinPanelIn { from { opacity: 0; transform: translate(-50%, -50%) scale(.95) } to { opacity: 1; transform: translate(-50%, -50%) scale(1) } }

/* Backdrop */
.skin-picker-backdrop {
  display: none; position: fixed; inset: 0; z-index: 10001;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.skin-picker-backdrop.show { display: block }

.skin-picker-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--muted); margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border);
  text-align: center;
}
.skin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px }
.skin-option {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px;
  cursor: pointer; border: 1.5px solid transparent; transition: .2s;
  background: transparent;
}
.skin-option:hover { background: var(--bg2); border-color: var(--border2) }
.skin-option.active { border-color: var(--accent); background: var(--bg2) }
.skin-swatch {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  border: 1px solid rgba(128,128,128,.2); position: relative; overflow: hidden;
}
.skin-swatch::after {
  content: ''; position: absolute; top: 0; right: 0; width: 50%; height: 100%;
}
.skin-name { font-size: 11.5px; font-weight: 600; color: var(--text2); line-height: 1.2 }
.skin-option.active .skin-name { color: var(--accent) }
.skin-hint { font-size: 9px; color: var(--dim); line-height: 1.2 }

/* ─── Transition on skin change ──────────────────────────────── */
html.skin-transitioning, html.skin-transitioning * {
  transition: background-color .35s ease, color .25s ease, border-color .3s ease !important;
}


/* ══════════════════════════════════════════════════════════════
   Legacy 'Hub v2 default override' (lines 221-293) moved to
   static/centinela-base.css — the single source of truth.
   ══════════════════════════════════════════════════════════════ */