/* ═══════════════════════════════════════════════════════════════
   get_sifted — Theme System

   Usage: Add <link rel="stylesheet" href="/themes.css"> to any page.
   Set theme via: document.documentElement.dataset.theme = 'dark' | 'light' | 'gold' | 'purple'
   Theme persists via localStorage key 'sift-theme'.
   ═══════════════════════════════════════════════════════════════ */

/* ── Dark (default) ── */
:root,
[data-theme="dark"] {
  --bg-primary: #0b0b0e;
  --bg-secondary: #111115;
  --bg-card: #161619;
  --bg-card-hover: #1c1c20;
  --bg-inset: #0e0e11;
  --border: #1e1e24;
  --border-light: #28282f;
  --border-strong: #3a3a44;
  --text-primary: #ededf0;
  --text-light: #b0b0c0;
  --text-secondary: #9898a8;
  --text-muted: #7c7c8a;   /* a11y bump: 5.1:1 on bg-primary */
  --text-faint: #5a5a6a;   /* a11y bump: 3.8:1 — decorative/large only */
  --accent: #d4a853;
  --accent-glow: #e8bf6a;
  --accent-dim: #b8923f;
  --accent-bg: rgba(212, 168, 83, 0.07);
  --accent-bg-strong: rgba(212, 168, 83, 0.14);
  --glow-color: rgba(212, 168, 83, 0.05);

  /* Semantic — calm urgency */
  --timely: #d4836a;
  --timely-bg: rgba(212, 131, 106, 0.08);
  --timely-bg-strong: rgba(212, 131, 106, 0.14);
  --soon: #7a9dbe;
  --soon-bg: rgba(122, 157, 190, 0.07);
  --steady: #6b6b7a;
  --steady-bg: rgba(107, 107, 122, 0.06);
  --low: #5c5c6e;
  --low-bg: rgba(92, 92, 110, 0.04);
  --resolved: #4a9e6e;
  --resolved-bg: rgba(74, 158, 110, 0.08);

  /* Utility */
  --green: #4a9e6e;
  --amber: #d4a853;
  --red: #d4836a;
  --blue: #7a9dbe;
  --danger: #d4836a;

  /* Channels */
  --gmail: #d95040;
  --whatsapp: #25d366;
  --outlook: #2b7cd3;
  --protonmail: #6d4aff;
  --linkedin: #0a66c2;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.25);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.35);

  /* Misc */
  --overlay-bg: rgba(0, 0, 0, 0.6);
  --scrollbar-thumb: #28282f;

  /* ── v2 Aliases (mockup token names → existing tokens) ── */
  --bg-base: var(--bg-primary);
  --bg-raised: var(--bg-secondary);
  --bg-panel: #131316;
  --border-subtle: var(--border);
  --border-default: var(--border-light);
  --accent-bright: var(--accent-glow);

  /* v2 Typography */
  --font-display: "General Sans", -apple-system, sans-serif;
  --font-body: "General Sans", -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  /* v2 Spacing scale */
  --gap-xs: 4px;
  --gap-sm: 8px;
  --gap-md: 16px;
  --gap-lg: 24px;
  --gap-xl: 40px;

  /* v2 Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* v2 Shadows */
  --card-shadow: 0 2px 8px rgba(0,0,0,0.2), 0 0 0 1px var(--border);
  --panel-shadow: 0 4px 20px rgba(0,0,0,0.3);

  /* ── Atmosphere ── soft ambient light pooling behind content,
     a faint edge falloff, and the strength of the paper grain.
     These are deliberately quiet — if you can name them, they're too loud. */
  --ambient-pool: rgba(232, 200, 140, 0.012);
  --ambient-edge: rgba(0, 0, 0, 0.5);
  --grain-fine: 0.025;
  --grain-coarse: 0.02;

  /* Focus-card paper surface tokens */
  --card-paper: #1a1a1f;
  --card-shadow-close: rgba(0, 0, 0, 0.25);
  --card-shadow-far: rgba(0, 0, 0, 0.35);

  /* List-card shadows — stacked cards need more punch than the hero focus card */
  --list-card-shadow-close: rgba(0, 0, 0, 0.30);
  --list-card-shadow-mid:   rgba(0, 0, 0, 0.32);
  --list-card-shadow-far:   rgba(0, 0, 0, 0.28);
}

/* ── Light ── */
[data-theme="light"] {
  --bg-primary: #f5f4f1;
  --bg-secondary: #eceae6;
  --bg-card: #ffffff;
  --bg-card-hover: #f9f8f6;
  --bg-inset: #f0eeeb;
  --border: #ddd9d2;
  --border-light: #ccc8c0;
  --border-strong: #b0aba2;
  --text-primary: #1a1a1e;
  --text-light: #4a4a52;
  --text-secondary: #6b6b76;
  --text-muted: #9898a4;
  --text-faint: #b8b8c0;
  --accent: #b8923f;
  --accent-glow: #d4a853;
  --accent-dim: #9a7a30;
  --accent-bg: rgba(184, 146, 63, 0.06);
  --accent-bg-strong: rgba(184, 146, 63, 0.12);
  --glow-color: rgba(184, 146, 63, 0.04);

  --timely: #c0694f;
  --timely-bg: rgba(192, 105, 79, 0.07);
  --timely-bg-strong: rgba(192, 105, 79, 0.13);
  --soon: #5a7d9e;
  --soon-bg: rgba(90, 125, 158, 0.06);
  --steady: #8a8a96;
  --steady-bg: rgba(138, 138, 150, 0.06);
  --low: #a0a0aa;
  --low-bg: rgba(160, 160, 170, 0.04);
  --resolved: #3d8a5c;
  --resolved-bg: rgba(61, 138, 92, 0.07);

  --green: #3d8a5c;
  --amber: #b8923f;
  --red: #c0694f;
  --blue: #5a7d9e;
  --danger: #c0694f;

  --gmail: #d95040;
  --whatsapp: #1da851;
  --outlook: #2060a8;
  --protonmail: #5a3ad4;
  --linkedin: #085090;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.1);

  --overlay-bg: rgba(0, 0, 0, 0.3);
  --scrollbar-thumb: #ccc8c0;

  /* ── v2 Aliases ── */
  --bg-base: var(--bg-primary);
  --bg-raised: var(--bg-secondary);
  --bg-panel: #eae8e4;
  --border-subtle: var(--border);
  --border-default: var(--border-light);
  --accent-bright: var(--accent-glow);
  --font-display: "General Sans", -apple-system, sans-serif;
  --font-body: "General Sans", -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --gap-xs: 4px; --gap-sm: 8px; --gap-md: 16px; --gap-lg: 24px; --gap-xl: 40px;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px;
  --card-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 0 0 1px var(--border);
  --panel-shadow: 0 4px 20px rgba(0,0,0,0.08);

  /* Atmosphere — fade led from the edges, warm umber falloff,
     center stays flat cream so the card has clean contrast to land on */
  --ambient-pool: rgba(255, 245, 220, 0.18);
  --ambient-edge: rgba(95, 70, 35, 0.13);

  /* Layered grain — fine fibre + coarse undulation, fine-art paper feel */
  --grain-fine: 0.06;
  --grain-coarse: 0.05;

  /* Focus-card paper surface — slightly off-white so it reads as paper, not screen */
  --card-paper: #fcfbf8;
  --card-shadow-close: rgba(60, 45, 20, 0.04);
  --card-shadow-far: rgba(60, 45, 20, 0.07);

  /* List-card shadows — much stronger than focus card for stacked list contrast on cream bg */
  --list-card-shadow-close: rgba(60, 45, 20, 0.10);
  --list-card-shadow-mid:   rgba(60, 45, 20, 0.14);
  --list-card-shadow-far:   rgba(60, 45, 20, 0.10);
}

/* (border-strong typo previously fixed at source above) */

/* ── Gold ── warm, rich dark theme */
[data-theme="gold"] {
  --bg-primary: #0e0c08;
  --bg-secondary: #151209;
  --bg-card: #1a160e;
  --bg-card-hover: #201c12;
  --bg-inset: #0c0a06;
  --border: #2a2418;
  --border-light: #38301f;
  --border-strong: #4a4028;
  --text-primary: #f0e8d8;
  --text-light: #c0b8a0;
  --text-secondary: #a09880;
  --text-muted: #888070;   /* a11y bump */
  --text-faint: #686050;   /* a11y bump */
  --accent: #e8bf6a;
  --accent-glow: #f0d080;
  --accent-dim: #c8a050;
  --accent-bg: rgba(232, 191, 106, 0.08);
  --accent-bg-strong: rgba(232, 191, 106, 0.15);
  --glow-color: rgba(232, 191, 106, 0.06);

  --timely: #d4836a;
  --timely-bg: rgba(212, 131, 106, 0.09);
  --timely-bg-strong: rgba(212, 131, 106, 0.16);
  --soon: #8aaac8;
  --soon-bg: rgba(138, 170, 200, 0.07);
  --steady: #787060;
  --steady-bg: rgba(120, 112, 96, 0.06);
  --low: #605848;
  --low-bg: rgba(96, 88, 72, 0.04);
  --resolved: #5aaa70;
  --resolved-bg: rgba(90, 170, 112, 0.09);

  --green: #5aaa70;
  --amber: #e8bf6a;
  --red: #d4836a;
  --blue: #8aaac8;
  --danger: #d4836a;

  --gmail: #d95040;
  --whatsapp: #25d366;
  --outlook: #2b7cd3;
  --protonmail: #6d4aff;
  --linkedin: #0a66c2;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.3);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.4);

  --overlay-bg: rgba(0, 0, 0, 0.65);
  --scrollbar-thumb: #38301f;

  /* ── v2 Aliases ── */
  --bg-base: var(--bg-primary);
  --bg-raised: var(--bg-secondary);
  --bg-panel: #12100a;
  --border-subtle: var(--border);
  --border-default: var(--border-light);
  --accent-bright: var(--accent-glow);
  --font-display: "General Sans", -apple-system, sans-serif;
  --font-body: "General Sans", -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --gap-xs: 4px; --gap-sm: 8px; --gap-md: 16px; --gap-lg: 24px; --gap-xl: 40px;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px;
  --card-shadow: 0 2px 8px rgba(0,0,0,0.3), 0 0 0 1px var(--border);
  --panel-shadow: 0 4px 20px rgba(0,0,0,0.35);

  /* Atmosphere — edge-led on warm dark */
  --ambient-pool: rgba(232, 191, 106, 0.02);
  --ambient-edge: rgba(0, 0, 0, 0.55);
  --grain-fine: 0.03;
  --grain-coarse: 0.025;

  /* Focus-card paper surface */
  --card-paper: #1f1a11;
  --card-shadow-close: rgba(0, 0, 0, 0.3);
  --card-shadow-far: rgba(0, 0, 0, 0.4);

  /* List-card shadows */
  --list-card-shadow-close: rgba(0, 0, 0, 0.35);
  --list-card-shadow-mid:   rgba(0, 0, 0, 0.38);
  --list-card-shadow-far:   rgba(0, 0, 0, 0.32);
}

/* (soon-color typo previously fixed at source above) */

/* ── Purple ── the original palette, refined */
[data-theme="purple"] {
  --bg-primary: #0a0a0e;
  --bg-secondary: #101018;
  --bg-card: #15151e;
  --bg-card-hover: #1c1c28;
  --bg-inset: #0d0d12;
  --border: #222230;
  --border-light: #2e2e40;
  --border-strong: #3e3e52;
  --text-primary: #e8e8f0;
  --text-light: #b0b0c8;
  --text-secondary: #8888a8;
  --text-muted: #7a7a8e;   /* a11y bump */
  --text-faint: #58586a;   /* a11y bump */
  --accent: #8b6cf0;
  --accent-glow: #a084f8;
  --accent-dim: #7058d0;
  --accent-bg: rgba(139, 108, 240, 0.07);
  --accent-bg-strong: rgba(139, 108, 240, 0.14);
  --glow-color: rgba(139, 108, 240, 0.05);

  --timely: #d4836a;
  --timely-bg: rgba(212, 131, 106, 0.08);
  --timely-bg-strong: rgba(212, 131, 106, 0.14);
  --soon: #7a9dbe;
  --soon-bg: rgba(122, 157, 190, 0.07);
  --steady: #6b6b7a;
  --steady-bg: rgba(107, 107, 122, 0.06);
  --low: #58586e;
  --low-bg: rgba(88, 88, 110, 0.04);
  --resolved: #4a9e6e;
  --resolved-bg: rgba(74, 158, 110, 0.08);

  --green: #4a9e6e;
  --amber: #d4a853;
  --red: #d4836a;
  --blue: #7a9dbe;
  --danger: #d4836a;

  --gmail: #d95040;
  --whatsapp: #25d366;
  --outlook: #2b7cd3;
  --protonmail: #6d4aff;
  --linkedin: #0a66c2;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.25);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.35);

  --overlay-bg: rgba(0, 0, 0, 0.6);
  --scrollbar-thumb: #2e2e40;

  /* ── v2 Aliases ── */
  --bg-base: var(--bg-primary);
  --bg-raised: var(--bg-secondary);
  --bg-panel: #121216;
  --border-subtle: var(--border);
  --border-default: var(--border-light);
  --accent-bright: var(--accent-glow);
  --font-display: "General Sans", -apple-system, sans-serif;
  --font-body: "General Sans", -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --gap-xs: 4px; --gap-sm: 8px; --gap-md: 16px; --gap-lg: 24px; --gap-xl: 40px;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px;
  --card-shadow: 0 2px 8px rgba(0,0,0,0.25), 0 0 0 1px var(--border);
  --panel-shadow: 0 4px 20px rgba(0,0,0,0.3);

  /* Atmosphere — edge-led, cool violet at the corners */
  --ambient-pool: rgba(160, 140, 220, 0.015);
  --ambient-edge: rgba(0, 0, 0, 0.5);
  --grain-fine: 0.025;
  --grain-coarse: 0.02;

  /* Focus-card paper surface */
  --card-paper: #18181f;
  --card-shadow-close: rgba(0, 0, 0, 0.25);
  --card-shadow-far: rgba(0, 0, 0, 0.35);

  /* List-card shadows */
  --list-card-shadow-close: rgba(0, 0, 0, 0.32);
  --list-card-shadow-mid:   rgba(0, 0, 0, 0.34);
  --list-card-shadow-far:   rgba(0, 0, 0, 0.28);
}


/* ═══════════════════════════════════════════════════════════════
   THEME SWITCHER COMPONENT
   ═══════════════════════════════════════════════════════════════ */
.theme-switcher {
  display: flex;
  align-items: center;
  gap: 4px;
}

.theme-swatch {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.theme-swatch:hover {
  border-color: var(--border-light);
  transform: scale(1.12);
}
.theme-swatch.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-bg-strong);
}
.theme-swatch.active::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.theme-swatch[data-theme="dark"]   { background: #0b0b0e; }
.theme-swatch[data-theme="light"]  { background: #f5f4f1; }
.theme-swatch[data-theme="gold"]   { background: #1a160e; border-color: #38301f; }
.theme-swatch[data-theme="purple"] { background: #15151e; border-color: #2e2e40; }


/* ═══════════════════════════════════════════════════════════════
   THEME INIT SCRIPT (inline-safe)

   Include this in <head> or <body> of every page:
   <script src="/theme-init.js"></script>
   ═══════════════════════════════════════════════════════════════ */