/* =============================================================
   theme.css — design tokens ONLY.
   Change colors, fonts, spacing, radii here. Nothing structural.
   Aesthetic: Kagi-clean — calm neutrals, generous whitespace, a
   single restrained accent. Brand gradient kept only for the wordmark
   and primary action so the rest of the UI stays quiet.
   ============================================================= */

:root {
  /* --- Brand gradient (used sparingly: wordmark + Fetch button) --- */
  --grad-1: #ff9a3c;
  --grad-2: #ff5e3a;
  --grad-3: #e0245e;
  --brand-gradient: linear-gradient(120deg, var(--grad-1), var(--grad-2) 55%, var(--grad-3));

  /* --- Surfaces (clean, near-white like Kagi) --- */
  --bg:            #ffffff;
  --bg-elevated:   #ffffff;
  --bg-sunk:       #f6f7f8;
  --border:        #ecedef;
  --border-strong: #dcdee1;

  /* --- Text --- */
  --text:        #1a1c1f;
  --text-soft:   #5c626b;
  --text-faint:  #9aa0a8;
  --text-invert: #ffffff;

  /* --- Accent (one calm coral, not a rainbow) --- */
  --accent:        #ff5e3a;
  --accent-ink:    #d8391a;
  --accent-soft:   #fff2ee;
  --link:          #1a5fd6;

  /* --- Feedback --- */
  --warn-bg:   #fff8e6;
  --warn-ink:  #8a6300;
  --warn-line: #f0e0a8;
  --err-bg:    #fdeeee;
  --err-ink:   #c23934;

  /* --- Type --- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* --- Shape (Kagi uses gentle, small radii) --- */
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* --- Depth (soft, minimal) --- */
  --shadow-sm: 0 1px 2px rgba(20, 24, 30, 0.05);
  --shadow:    0 2px 10px rgba(20, 24, 30, 0.07);
  --shadow-lg: 0 12px 34px rgba(20, 24, 30, 0.12);

  /* --- Motion --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur:  0.2s;

  /* --- Sidebar --- */
  --sidebar-w: 260px;
}

/* --- Dark tokens ---
   Applied in two cases:
   1. data-theme="dark"           → user explicitly chose dark
   2. no data-theme + OS is dark  → "auto" mode following the system
   data-theme="light" forces the base (light) tokens even on a dark OS. */
[data-theme="dark"] {
  --bg:            #16181c;
  --bg-elevated:   #1d2025;
  --bg-sunk:       #202329;
  --border:        #2b2f36;
  --border-strong: #3a3f47;

  --text:        #eceef1;
  --text-soft:   #a6acb5;
  --text-faint:  #727880;
  --text-invert: #16181c;

  --accent-soft: #2a1a14;
  --link:        #6ea8ff;

  --warn-bg:  #2a2410;
  --warn-ink: #ffd27a;
  --warn-line:#5a4d13;
  --err-bg:   #2c1614;
  --err-ink:  #ff9c93;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow:    0 2px 10px rgba(0,0,0,0.5);
  --shadow-lg: 0 12px 34px rgba(0,0,0,0.6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:            #16181c;
    --bg-elevated:   #1d2025;
    --bg-sunk:       #202329;
    --border:        #2b2f36;
    --border-strong: #3a3f47;

    --text:        #eceef1;
    --text-soft:   #a6acb5;
    --text-faint:  #727880;
    --text-invert: #16181c;

    --accent-soft: #2a1a14;
    --link:        #6ea8ff;

    --warn-bg:  #2a2410;
    --warn-ink: #ffd27a;
    --warn-line:#5a4d13;
    --err-bg:   #2c1614;
    --err-ink:  #ff9c93;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
    --shadow:    0 2px 10px rgba(0,0,0,0.5);
    --shadow-lg: 0 12px 34px rgba(0,0,0,0.6);
  }
}