/* ══════════════════════════════════════════════════════════════
   THEME SYSTEM — Apple HIG-inspired semantic tokens
   Dark mode = default, Light mode = [data-theme="light"]
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ── Backgrounds ─────────────────────────────────────────── */
  --bg:             #000000;
  --bg-grouped:     #1C1C1E;
  --surface:        #1C1C1E;
  --surface2:       #2C2C2E;
  --surface3:       #3A3A3C;

  /* ── Borders & Separators ────────────────────────────────── */
  --border:         #38383A;
  --border-light:   #2C2C2E;
  --separator:      rgba(84,84,88,0.65);

  /* ── Text ────────────────────────────────────────────────── */
  --text:           #FFFFFF;
  --text-secondary: rgba(235,235,245,0.7);
  --text-tertiary:  rgba(235,235,245,0.5);
  --text-quaternary:rgba(235,235,245,0.35);

  /* ── Accent / Tint ──────────────────────────────────────── */
  --accent:         #0A84FF;
  --accent-hover:   #409CFF;
  --accent-dim:     rgba(10,132,255,0.18);
  --accent-text:    #0A84FF;

  /* ── Semantic Colors ─────────────────────────────────────── */
  --red:            #FF453A;
  --red-bg:         rgba(255,69,58,0.12);
  --red-border:     rgba(255,69,58,0.25);

  --orange:         #FF9F0A;
  --orange-bg:      rgba(255,159,10,0.12);
  --orange-border:  rgba(255,159,10,0.25);

  --green:          #30D158;
  --green-bg:       rgba(48,209,88,0.12);
  --green-border:   rgba(48,209,88,0.25);

  --purple:         #BF5AF2;
  --purple-bg:      rgba(191,90,242,0.12);
  --purple-border:  rgba(191,90,242,0.25);

  --yellow:         #FFD60A;

  /* ── Fills (Apple HIG system fills) ──────────────────────── */
  --fill-primary:   rgba(120,120,128,0.36);
  --fill-secondary: rgba(120,120,128,0.32);
  --fill-tertiary:  rgba(120,120,128,0.24);
  --fill-quaternary:rgba(120,120,128,0.18);

  /* ── Typography ──────────────────────────────────────────── */
  --font-body:      'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  --font-mono:      'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;

  /* ── Radii ───────────────────────────────────────────────── */
  --radius-sm:      6px;
  --radius-md:      10px;
  --radius-lg:      14px;
  --radius-xl:      20px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-sm:      0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:      0 2px 8px rgba(0,0,0,0.4);
  --shadow-lg:      0 8px 32px rgba(0,0,0,0.5);
  --shadow-xl:      0 16px 48px rgba(0,0,0,0.6);

  /* ── Transitions ─────────────────────────────────────────── */
  --ease-default:   cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration:       200ms;

  /* ── Legacy aliases (used by JS-generated content) ───────── */
  --danger:         var(--red);
  --danger-bg:      var(--red-bg);
  --danger-border:  var(--red-border);
  --warning:        var(--orange);
  --warning-bg:     var(--orange-bg);
  --warning-border: var(--orange-border);
  --ok:             var(--green);
  --ok-bg:          var(--green-bg);
  --ok-border:      var(--green-border);
  --ending:         var(--purple);
  --ending-bg:      var(--purple-bg);
  --ending-border:  var(--purple-border);
  --text-muted:     var(--text-secondary);
  --text-dim:       var(--text-secondary);
  --mono:           var(--font-mono);
  --sans:           var(--font-body);
}

/* ── Light Mode ────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:             #F2F2F7;
  --bg-grouped:     #FFFFFF;
  --surface:        #FFFFFF;
  --surface2:       #F2F2F7;
  --surface3:       #E5E5EA;

  --border:         #C7C7CC;
  --border-light:   #D1D1D6;
  --separator:      rgba(60,60,67,0.36);

  --text:           #1C1C1E;
  --text-secondary: #48484A;
  --text-tertiary:  #6C6C70;
  --text-quaternary:#8E8E93;

  --accent:         #0062CC;
  --accent-hover:   #004999;
  --accent-dim:     rgba(0,98,204,0.1);
  --accent-text:    #0055B3;

  --red:            #C5000F;
  --red-bg:         rgba(197,0,15,0.07);
  --red-border:     rgba(197,0,15,0.2);

  --orange:         #A62D00;
  --orange-bg:      rgba(166,45,0,0.07);
  --orange-border:  rgba(166,45,0,0.2);

  --green:          #1D7030;
  --green-bg:       rgba(29,112,48,0.07);
  --green-border:   rgba(29,112,48,0.2);

  --purple:         #6F36A0;
  --purple-bg:      rgba(111,54,160,0.07);
  --purple-border:  rgba(111,54,160,0.2);

  --yellow:         #8A3E00;

  --fill-primary:   rgba(120,120,128,0.2);
  --fill-secondary: rgba(120,120,128,0.16);
  --fill-tertiary:  rgba(120,120,128,0.12);
  --fill-quaternary:rgba(120,120,128,0.08);

  --shadow-sm:      0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:      0 2px 8px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08);
  --shadow-lg:      0 8px 24px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
  --shadow-xl:      0 16px 48px rgba(0,0,0,0.14), 0 4px 16px rgba(0,0,0,0.08);

  --danger:         var(--red);
  --danger-bg:      var(--red-bg);
  --danger-border:  var(--red-border);
  --warning:        var(--orange);
  --warning-bg:     var(--orange-bg);
  --warning-border: var(--orange-border);
  --ok:             var(--green);
  --ok-bg:          var(--green-bg);
  --ok-border:      var(--green-border);
  --ending:         var(--purple);
  --ending-bg:      var(--purple-bg);
  --ending-border:  var(--purple-border);
  --text-muted:     var(--text-secondary);
  --text-dim:       var(--text-tertiary);
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Smooth theme transition ───────────────────────────────── */
body,
.topbar, .drawer, .stat-card, .table-wrap, .job-fit-panel,
.tab-btn, .nav-link, .city-chip, .modal {
  transition: background-color var(--duration) var(--ease-default),
              border-color var(--duration) var(--ease-default),
              color var(--duration) var(--ease-default);
}

/* ── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Scrollbar (Webkit) ────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--fill-tertiary); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--fill-secondary); }

/* ── Focus ring (Apple-style) ──────────────────────────────── */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}