/* ============================================================
   variables.css — Shared Theme Variables
   IKON × Comarch | AI Wealth Assessment
   ============================================================ */

/* ── Brand Colors (always fixed) ── */
:root {
  --orange:        #E06020;
  --orange2:       #F07838;
  --orange-soft:   rgba(224, 96, 32, 0.10);
  --orange-border: rgba(224, 96, 32, 0.22);
  --font-display:  'Playfair Display', serif;
  --font-body:     'DM Sans', sans-serif;
  --font-mono:     'DM Mono', monospace;
}

/* ── Light Theme (default) ── */
[data-theme="light"] {
  --bg:            #F5F2ED;
  --bg2:           #FFFFFF;
  --bg3:           #EDE9E2;
  --text:          #1A1820;
  --text2:         #48465E;
  --muted:         #7A788A;
  --border:        rgba(0, 0, 0, 0.09);
  --card:          #FFFFFF;
  --input-bg:      #FFFFFF;
  --input-border:  rgba(0, 0, 0, 0.14);
  --shadow:        0 1px 3px rgba(0,0,0,0.07), 0 4px 12px rgba(0,0,0,0.05);
  --shadow-lg:     0 4px 16px rgba(0,0,0,0.08), 0 16px 40px rgba(0,0,0,0.07);
  --track-bg:      rgba(0, 0, 0, 0.09);
  --dot-bg:        rgba(0, 0, 0, 0.09);
  --dot-done:      rgba(224, 96, 32, 0.28);
  --ctx-bg:        rgba(224, 96, 32, 0.05);
  --ctx-border:    rgba(224, 96, 32, 0.22);
  --opt-bg:        #FAFAF8;
  --opt-border:    rgba(0, 0, 0, 0.10);
  --opt-hover:     rgba(224, 96, 32, 0.07);
  --opt-sel:       rgba(224, 96, 32, 0.11);
  --divider:       rgba(0, 0, 0, 0.07);
  --placeholder:   rgba(0, 0, 0, 0.26);
  --bar-track:     rgba(0, 0, 0, 0.08);
  --notice-bg:     rgba(224, 96, 32, 0.05);
  --grad1:         rgba(224, 96, 32, 0.06);
  --grad2:         rgba(224, 96, 32, 0.02);
  --err-bg:        rgba(239, 68, 68, 0.07);
  --err-border:    rgba(239, 68, 68, 0.20);
  --err-text:      #dc2626;
  --header-bg:     rgba(245, 242, 237, 0.92);
  --progress-bg:   rgba(245, 242, 237, 0.94);
}

/* ── Dark Theme — softer, not pure black ── */
[data-theme="dark"] {
  --bg:            #1E2235;   /* warm dark slate — not pitch black */
  --bg2:           #272C42;   /* panels / sidebar */
  --bg3:           #31374F;   /* slightly lighter */
  --text:          #E8E3D8;   /* warm off-white */
  --text2:         #B4BCCF;   /* secondary */
  --muted:         #818898;   /* muted labels */
  --border:        rgba(255, 255, 255, 0.10);
  --card:          #272C42;   /* solid card, easier on eyes */
  --input-bg:      rgba(255, 255, 255, 0.07);
  --input-border:  rgba(255, 255, 255, 0.14);
  --shadow:        0 1px 4px rgba(0,0,0,0.25), 0 4px 16px rgba(0,0,0,0.20);
  --shadow-lg:     0 4px 20px rgba(0,0,0,0.30), 0 16px 48px rgba(0,0,0,0.25);
  --track-bg:      rgba(255, 255, 255, 0.12);
  --dot-bg:        rgba(255, 255, 255, 0.12);
  --dot-done:      rgba(224, 96, 32, 0.35);
  --ctx-bg:        rgba(255, 255, 255, 0.04);
  --ctx-border:    rgba(224, 96, 32, 0.30);
  --opt-bg:        rgba(255, 255, 255, 0.05);
  --opt-border:    rgba(255, 255, 255, 0.12);
  --opt-hover:     rgba(224, 96, 32, 0.10);
  --opt-sel:       rgba(224, 96, 32, 0.18);
  --divider:       rgba(255, 255, 255, 0.08);
  --placeholder:   rgba(255, 255, 255, 0.28);
  --bar-track:     rgba(255, 255, 255, 0.10);
  --notice-bg:     rgba(224, 96, 32, 0.08);
  --grad1:         rgba(224, 96, 32, 0.08);
  --grad2:         rgba(49, 55, 79, 0.60);
  --err-bg:        rgba(239, 68, 68, 0.12);
  --err-border:    rgba(239, 68, 68, 0.28);
  --err-text:      #fca5a5;
  --header-bg:     rgba(30, 34, 53, 0.92);
  --progress-bg:   rgba(30, 34, 53, 0.94);
}