/* ============================================================ */
/* Savannah UI — Theme System                                  */
/* Platform: Savannah  |  Agent: Leo                          */
/* Inspired by Odysseus AI design language, built fresh       */
/* ============================================================ */

/* ── Core Token Map ──
 * Every theme sets exactly these tokens.
 * Components never use raw hex — always var(--token).
 *
 *   --bg          Main background
 *   --fg          Primary text / foreground
 *   --panel       Sidebar, cards, modals
 *   --border      Dividers and outlines
 *   --accent      Brand color — buttons, highlights, logo
 *   --accent-hover Darker accent for hover states
 *   --muted       De-emphasized text
 *   --user-bubble User message background
 *   --leo-bubble  Leo message background
 *   --input-bg    Chat input area
 *   --input-border Chat input border
 *   --send-btn    Send button background
 *   --scrollbar   Scrollbar thumb color
 *   --overlay     Backdrop / modal overlay
 */

/* ════════════════════════════════════════════════════════════
   DEFAULT: savannah  ─ warm dark earth, golden accent
   Inspired by: Odysseus "dark" but warmed up for the brand
   Animation: embers
   ════════════════════════════════════════════════════════════ */
:root,
[data-theme="savannah"] {
  --bg:           #1a1408;
  --fg:           #f0d080;
  --panel:        #100e06;
  --border:       #3d3018;
  --accent:       #e8a020;
  --accent-hover: #c8880a;
  --muted:        #8a7840;
  --user-bubble:  #1a1408;
  --leo-bubble:   #100e06;
  --input-bg:     #100e06;
  --input-border: #3d3018;
  --send-btn:     #e8a020;
  --scrollbar:    #3d3018;
  --overlay:      rgba(10, 8, 2, 0.75);
  --bg-animation: embers;

  /* Semantic */
  --color-success: #60c060;
  --color-error:   #e05050;
  --color-warning: #e09030;
  --color-info:    #60a8d8;

  /* Syntax highlighting */
  --hl-bg:       #0e0c05;
  --hl-fg:       #f0d080;
  --hl-keyword:  #e06090;
  --hl-string:   #90c060;
  --hl-comment:  #6a5a30;
  --hl-function: #60a8d8;
  --hl-number:   #d07040;
  --hl-builtin:  #60c0b0;

  /* Layout */
  --sidebar-width:     240px;
  --header-height:     52px;
  --input-bar-height:  72px;
  --border-radius:     10px;
  --border-radius-sm:  6px;
  --border-radius-lg:  16px;

  /* Typography */
  --font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:   'Fira Code', 'Cascadia Code', monospace;
  --font-size:   14px;
  --line-height: 1.6;

  /* Transitions */
  --transition: 0.18s ease;
  --transition-slow: 0.35s ease;
}

/* ════════════════════════════════════════════════════════════
   leo  ─ deep charcoal with lion-gold
   Inspiration: Odysseus "dark" meets the Leo agent brand
   Animation: neural
   ════════════════════════════════════════════════════════════ */
[data-theme="leo"] {
  --bg:           #18150e;
  --fg:           #d4b878;
  --panel:        #100d08;
  --border:       #3d3020;
  --accent:       #c8902a;
  --accent-hover: #a87015;
  --muted:        #7a6840;
  --user-bubble:  #18150e;
  --leo-bubble:   #100d08;
  --input-bg:     #100d08;
  --input-border: #3d3020;
  --send-btn:     #c8902a;
  --scrollbar:    #3d3020;
  --overlay:      rgba(8, 6, 3, 0.78);
  --bg-animation: neural;

  --hl-bg:       #0d0b06;
  --hl-fg:       #d4b878;
  --hl-keyword:  #c060a0;
  --hl-string:   #80b860;
  --hl-comment:  #60502a;
  --hl-function: #5898c8;
  --hl-number:   #c06838;
  --hl-builtin:  #58b0a0;
}

/* ════════════════════════════════════════════════════════════
   veldt  ─ warm daylight cream, light mode
   Inspiration: Odysseus "light" / "paper" — warmed for brand
   Animation: dots
   ════════════════════════════════════════════════════════════ */
[data-theme="veldt"] {
  --bg:           #faf4e8;
  --fg:           #3a2e18;
  --panel:        #fff9f0;
  --border:       #d8c8a0;
  --accent:       #c07830;
  --accent-hover: #a05818;
  --muted:        #8a7850;
  --user-bubble:  #faf4e8;
  --leo-bubble:   #fff9f0;
  --input-bg:     #fff9f0;
  --input-border: #d8c8a0;
  --send-btn:     #c07830;
  --scrollbar:    #d8c8a0;
  --overlay:      rgba(30, 20, 8, 0.55);
  --bg-animation: dots;

  --hl-bg:       #f5efe0;
  --hl-fg:       #3a2e18;
  --hl-keyword:  #a03080;
  --hl-string:   #507830;
  --hl-comment:  #907858;
  --hl-function: #285898;
  --hl-number:   #985030;
  --hl-builtin:  #287870;
}

/* ════════════════════════════════════════════════════════════
   romanian  ─ deep navy, gold text, crimson accent
   Inspiration: Romanian flag (blue/yellow/red) + Odysseus "midnight"
   Animation: constellations
   ════════════════════════════════════════════════════════════ */
[data-theme="romanian"] {
  --bg:           #080e1a;
  --fg:           #e8d060;
  --panel:        #040912;
  --border:       #182848;
  --accent:       #cc1030;
  --accent-hover: #a80828;
  --muted:        #6878a0;
  --user-bubble:  #080e1a;
  --leo-bubble:   #040912;
  --input-bg:     #040912;
  --input-border: #182848;
  --send-btn:     #cc1030;
  --scrollbar:    #182848;
  --overlay:      rgba(2, 4, 10, 0.80);
  --bg-animation: constellations;

  --hl-bg:       #040912;
  --hl-fg:       #e8d060;
  --hl-keyword:  #cc1030;
  --hl-string:   #58a860;
  --hl-comment:  #485880;
  --hl-function: #4890d8;
  --hl-number:   #d86840;
  --hl-builtin:  #38a8b8;
}

/* ════════════════════════════════════════════════════════════
   dusk  ─ sunset purple-orange, dramatic
   Inspiration: Odysseus "retrowave" softened
   Animation: embers
   ════════════════════════════════════════════════════════════ */
[data-theme="dusk"] {
  --bg:           #0f0a14;
  --fg:           #e8c49a;
  --panel:        #08060e;
  --border:       #3d2550;
  --accent:       #e07840;
  --accent-hover: #c05820;
  --muted:        #806070;
  --user-bubble:  #0f0a14;
  --leo-bubble:   #08060e;
  --input-bg:     #08060e;
  --input-border: #3d2550;
  --send-btn:     #e07840;
  --scrollbar:    #3d2550;
  --overlay:      rgba(5, 3, 8, 0.78);
  --bg-animation: embers;

  --hl-bg:       #06040a;
  --hl-fg:       #e8c49a;
  --hl-keyword:  #e050a0;
  --hl-string:   #70b860;
  --hl-comment:  #604870;
  --hl-function: #6090d8;
  --hl-number:   #d07040;
  --hl-builtin:  #50b0b0;
}

/* ════════════════════════════════════════════════════════════
   midnight  ─ professional dark navy blue
   Inspiration: Odysseus "midnight" / "ocean"
   Animation: rain
   ════════════════════════════════════════════════════════════ */
[data-theme="midnight"] {
  --bg:           #090e18;
  --fg:           #90c0e0;
  --panel:        #050912;
  --border:       #162440;
  --accent:       #2878d0;
  --accent-hover: #1058a8;
  --muted:        #506888;
  --user-bubble:  #090e18;
  --leo-bubble:   #050912;
  --input-bg:     #050912;
  --input-border: #162440;
  --send-btn:     #2878d0;
  --scrollbar:    #162440;
  --overlay:      rgba(2, 4, 10, 0.80);
  --bg-animation: rain;

  --hl-bg:       #04070e;
  --hl-fg:       #90c0e0;
  --hl-keyword:  #a060d0;
  --hl-string:   #60b060;
  --hl-comment:  #406080;
  --hl-function: #60a0e0;
  --hl-number:   #c07840;
  --hl-builtin:  #40b0c0;
}

/* ════════════════════════════════════════════════════════════
   grove  ─ deep forest green, nature
   Inspiration: Odysseus "forest"
   Animation: petals
   ════════════════════════════════════════════════════════════ */
[data-theme="grove"] {
  --bg:           #0e1a0e;
  --fg:           #90d090;
  --panel:        #081008;
  --border:       #1e4020;
  --accent:       #48c050;
  --accent-hover: #30a038;
  --muted:        #507858;
  --user-bubble:  #0e1a0e;
  --leo-bubble:   #081008;
  --input-bg:     #081008;
  --input-border: #1e4020;
  --send-btn:     #48c050;
  --scrollbar:    #1e4020;
  --overlay:      rgba(2, 6, 2, 0.78);
  --bg-animation: petals;

  --hl-bg:       #060e06;
  --hl-fg:       #90d090;
  --hl-keyword:  #a060d0;
  --hl-string:   #80c060;
  --hl-comment:  #406040;
  --hl-function: #60a8d8;
  --hl-number:   #d09040;
  --hl-builtin:  #50c0b0;
}

/* ════════════════════════════════════════════════════════════
   cotton  ─ clean white, professional light
   Inspiration: Odysseus "paper" — cleaner
   Animation: sparkles
   ════════════════════════════════════════════════════════════ */
[data-theme="cotton"] {
  --bg:           #f8f6f2;
  --fg:           #282018;
  --panel:        #ffffff;
  --border:       #d8d0c0;
  --accent:       #b06828;
  --accent-hover: #905010;
  --muted:        #887860;
  --user-bubble:  #f0ede8;
  --leo-bubble:   #ffffff;
  --input-bg:     #ffffff;
  --input-border: #d8d0c0;
  --send-btn:     #b06828;
  --scrollbar:    #d8d0c0;
  --overlay:      rgba(20, 15, 8, 0.50);
  --bg-animation: sparkles;

  --hl-bg:       #f0ede6;
  --hl-fg:       #282018;
  --hl-keyword:  #982060;
  --hl-string:   #487030;
  --hl-comment:  #887860;
  --hl-function: #205890;
  --hl-number:   #904820;
  --hl-builtin:  #207068;
}

/* ════════════════════════════════════════════════════════════
   ember  ─ volcanic dark red-orange
   Inspiration: Odysseus "organs" + "copper"
   Animation: embers
   ════════════════════════════════════════════════════════════ */
[data-theme="ember"] {
  --bg:           #120808;
  --fg:           #f0a060;
  --panel:        #0c0505;
  --border:       #3d1810;
  --accent:       #e04820;
  --accent-hover: #c02808;
  --muted:        #804838;
  --user-bubble:  #120808;
  --leo-bubble:   #0c0505;
  --input-bg:     #0c0505;
  --input-border: #3d1810;
  --send-btn:     #e04820;
  --scrollbar:    #3d1810;
  --overlay:      rgba(6, 2, 2, 0.80);
  --bg-animation: embers;

  --hl-bg:       #0a0404;
  --hl-fg:       #f0a060;
  --hl-keyword:  #e05090;
  --hl-string:   #88b050;
  --hl-comment:  #704030;
  --hl-function: #6098c8;
  --hl-number:   #d07840;
  --hl-builtin:  #50a8a0;
}

/* ════════════════════════════════════════════════════════════
   frost  ─ clean icy light blue
   Inspiration: Odysseus "lavender" cooled to blue
   Animation: constellations
   ════════════════════════════════════════════════════════════ */
[data-theme="frost"] {
  --bg:           #f0f4f8;
  --fg:           #182840;
  --panel:        #f8fbff;
  --border:       #b8ccdc;
  --accent:       #1860b0;
  --accent-hover: #104890;
  --muted:        #5878a0;
  --user-bubble:  #e8f0f8;
  --leo-bubble:   #f8fbff;
  --input-bg:     #f8fbff;
  --input-border: #b8ccdc;
  --send-btn:     #1860b0;
  --scrollbar:    #b8ccdc;
  --overlay:      rgba(10, 18, 30, 0.50);
  --bg-animation: constellations;

  --hl-bg:       #e8f0f8;
  --hl-fg:       #182840;
  --hl-keyword:  #802880;
  --hl-string:   #307830;
  --hl-comment:  #608090;
  --hl-function: #105890;
  --hl-number:   #804020;
  --hl-builtin:  #106870;
}

/* ════════════════════════════════════════════════════════════
   terminal  ─ pure black matrix green
   Inspiration: Odysseus "terminal" — for power users
   Animation: rain (green)
   ════════════════════════════════════════════════════════════ */
[data-theme="terminal"] {
  --bg:           #000000;
  --fg:           #00e040;
  --panel:        #080808;
  --border:       #003820;
  --accent:       #00e040;
  --accent-hover: #00b830;
  --muted:        #006820;
  --user-bubble:  #000000;
  --leo-bubble:   #080808;
  --input-bg:     #080808;
  --input-border: #003820;
  --send-btn:     #00e040;
  --scrollbar:    #003820;
  --overlay:      rgba(0, 0, 0, 0.88);
  --bg-animation: rain;

  --hl-bg:       #050505;
  --hl-fg:       #00e040;
  --hl-keyword:  #00c8e0;
  --hl-string:   #80d020;
  --hl-comment:  #006820;
  --hl-function: #20e0c0;
  --hl-number:   #e0c000;
  --hl-builtin:  #00c8a0;
}