/**
 * AI Sidebar — Shared design tokens
 * Single source of truth for colors, typography, radii, shadows.
 * Consumed by both the extension UI (sidebar/sidebar.css) and the
 * landing site (site/assets/styles.css). Auto light/dark via
 * prefers-color-scheme; explicit override via :root[data-theme="…"].
 */

:root {
  --font-sans: "Söhne", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Helvetica Neue", Arial, "Heebo", "Noto Sans Hebrew", sans-serif;
  --font-serif: "Source Serif 4", "Source Serif Pro", "Iowan Old Style", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;

  /* Anthropic / Claude marketing palette — no pure white, no near-black */
  --bg:           #eeece2;
  --bg-elev:      #f4f3ee;
  --bg-sunk:      #e5e2d4;
  --surface:      #f4f3ee;
  --surface-2:    #ebe8db;
  --surface-3:    #e0dccc;
  --line:         rgba(61, 57, 41, 0.10);
  --line-strong:  rgba(61, 57, 41, 0.18);
  --ink:          #3d3929;
  --ink-2:        #544f3f;
  --ink-3:        #6b6555;
  --ink-4:        #91897a;
  --ink-5:        #b8b1a0;
  --accent:       #da7756;
  --accent-2:     #bd5d3a;
  --accent-soft:  #f3dccf;
  --accent-ink:   #6b2a13;
  --accent-on-soft: #6b2a13;
  --success:      #4a8f5a;
  --danger:       #b14545;
  --p-claude:  #da7756; --p-gpt: #10a37f; --p-gemini: #4577b3;
  --p-grok: #3d3929;    --p-groq: #f55036; --p-ollama: #7e57c2;
  --shadow-sm: 0 1px 2px rgba(20,18,14,0.04);
  --shadow-md: 0 2px 6px rgba(20,18,14,0.05), 0 8px 22px rgba(20,18,14,0.06);
  --shadow-lg: 0 8px 30px rgba(20,18,14,0.10), 0 2px 6px rgba(20,18,14,0.04);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:           #262421;
    --bg-elev:      #34322e;
    --bg-sunk:      #1f1d1a;
    --surface:      #2d2b27;
    --surface-2:    #34322e;
    --surface-3:    #3d3b36;
    --line:         rgba(238, 236, 226, 0.10);
    --line-strong:  rgba(238, 236, 226, 0.18);
    --ink:          #eeece2;
    --ink-2:        #d4ccb8;
    --ink-3:        #b8b1a0;
    --ink-4:        #837e72;
    --ink-5:        #5c574e;
    --accent:       #e08866;
    --accent-2:     #c96846;
    --accent-soft:  rgba(218, 119, 86, 0.16);
    --accent-ink:   #f9d8c8;
    --accent-on-soft: #e08866;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 2px 6px rgba(0,0,0,0.35), 0 8px 22px rgba(0,0,0,0.25);
    --shadow-lg: 0 12px 36px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:           #262421;
  --bg-elev:      #34322e;
  --bg-sunk:      #1f1d1a;
  --surface:      #2d2b27;
  --surface-2:    #34322e;
  --surface-3:    #3d3b36;
  --line:         rgba(238, 236, 226, 0.10);
  --line-strong:  rgba(238, 236, 226, 0.18);
  --ink:          #eeece2;
  --ink-2:        #d4ccb8;
  --ink-3:        #b8b1a0;
  --ink-4:        #837e72;
  --ink-5:        #5c574e;
  --accent:       #e08866;
  --accent-2:     #c96846;
  --accent-soft:  rgba(218, 119, 86, 0.16);
  --accent-ink:   #f9d8c8;
  --accent-on-soft: #e08866;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 2px 6px rgba(0,0,0,0.35), 0 8px 22px rgba(0,0,0,0.25);
  --shadow-lg: 0 12px 36px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3);
}

:root[data-theme="light"] { color-scheme: light; }