/* ── Design System ─────────────────────────────────────────
   Single source for all colors, typography, spacing, layout.
   Import this in every resume page. Override per-template
   by redefining variables in a <style> block after import.
──────────────────────────────────────────────────────────── */

:root {
  /* ── Sidebar ── */
  --sidebar-bg:          rgb(100, 223, 227);
  --sidebar-text:        #0a2020;
  --sidebar-heading:     #071515;
  --sidebar-muted:       #1a3535;
  --sidebar-tag-bg:      rgba(0,0,0,0.18);
  --sidebar-tag-border:  rgba(0,0,0,0.25);
  --sidebar-tag-text:    #071515;
  --sidebar-divider:     rgba(0,0,0,0.2);
  --sidebar-width:       270px;

  /* ── Accent (main content) ── */
  --accent:              #0f62fe;
  --accent2:             #0043ce;
  --accent-light:        #eef4ff;
  --accent-light-border: #c8daff;

  /* ── Neutral palette ── */
  --text:                #161616;
  --muted:               #525252;
  --light:               #f4f4f4;
  --border:              #e0e0e0;
  --white:               #ffffff;
  --page-bg:             #dde1e7;

  /* ── Typography ── */
  --font:                'Segoe UI', system-ui, -apple-system, sans-serif;
  --text-xl:             22px;
  --text-lg:             14px;
  --text-md:             12.5px;
  --text-sm:             12px;
  --text-xs:             11px;
  --text-xxs:            10px;

  /* ── Spacing ── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-11:  44px;

  /* ── Layout ── */
  --resume-max-width: 900px;
  --radius:           2px;
  --radius-sm:        3px;
}

/* ─── Theme presets ────────────────────────────────────────
   Apply class to <html> to switch theme.                  */

html.theme-teal   { --sidebar-bg: rgb(100, 223, 227); }
html.theme-navy   { --sidebar-bg: #0f172a; --sidebar-text: #cbd5e1; --sidebar-heading: #fff;
                    --sidebar-muted: #94a3b8; --sidebar-tag-bg: #1e293b;
                    --sidebar-tag-border: #334155; --sidebar-tag-text: #94a3b8;
                    --sidebar-divider: #1e293b; }
html.theme-slate  { --sidebar-bg: #334155; --sidebar-text: #e2e8f0; --sidebar-heading: #f8fafc;
                    --sidebar-muted: #cbd5e1; --sidebar-tag-bg: #1e293b;
                    --sidebar-tag-border: #475569; --sidebar-tag-text: #e2e8f0;
                    --sidebar-divider: #475569; }
html.theme-green  { --sidebar-bg: #064e3b; --sidebar-text: #d1fae5; --sidebar-heading: #ecfdf5;
                    --sidebar-muted: #a7f3d0; --sidebar-tag-bg: #065f46;
                    --sidebar-tag-border: #047857; --sidebar-tag-text: #d1fae5;
                    --sidebar-divider: #065f46; }
html.theme-purple { --sidebar-bg: #4c1d95; --sidebar-text: #ede9fe; --sidebar-heading: #f5f3ff;
                    --sidebar-muted: #c4b5fd; --sidebar-tag-bg: #5b21b6;
                    --sidebar-tag-border: #6d28d9; --sidebar-tag-text: #ede9fe;
                    --sidebar-divider: #5b21b6; }
