/* ============================================================
   DESIGN TOKENS — All themes and spacing defined here
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;1,300;1,400&family=Inter:wght@300;400;500;600&family=Lora:ital,wght@0,400;0,600;1,400&display=swap');

:root {
  /* --- Fonts --- */
  --font-reading: 'Merriweather', Georgia, serif;
  --font-ui:      'Inter', system-ui, sans-serif;
  --font-alt:     'Lora', Georgia, serif;

  /* --- Font Sizes (reader, adjustable) --- */
  --font-size-reading: 18px;
  --line-height-reading: 1.8;
  --letter-spacing-reading: 0.01em;

  /* --- Layout --- */
  --header-height: 56px;
  --footer-height: 56px;
  --reading-max-width: 680px;
  --reading-padding-x: 2.5rem;
  --reading-padding-y: 2rem;
  --toc-width: 320px;
  --annotation-panel-width: 360px;
  --border-radius: 12px;
  --border-radius-sm: 8px;

  /* --- Transitions --- */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* --- Z-index layers --- */
  --z-reading:    1;
  --z-header:    10;
  --z-sidebar:   20;
  --z-panel:     30;
  --z-overlay:   40;
  --z-toast:     50;
  --z-tooltip:   60;
}

/* ===================== LIGHT THEME ===================== */
[data-theme="light"] {
  --bg-page:         #f8f6f1;
  --bg-reading:      #fefcf8;
  --bg-ui:           #ffffff;
  --bg-ui-secondary: #f3f0eb;
  --bg-hover:        #ede9e3;
  --bg-overlay:      rgba(248, 246, 241, 0.75);

  --text-primary:    #1a1714;
  --text-secondary:  #4a4540;
  --text-muted:      #8a827a;
  --text-ui:         #2a2520;

  --border-color:    #ddd8d0;
  --border-subtle:   #ede9e3;

  --danger:          #ef4444;
  --danger-hover:    #dc2626;

  --accent:          #d97706;
  --accent-hover:    #b45309;
  --accent-light:    rgba(217, 119, 6, 0.12);

  --hl-yellow:  rgba(251, 191, 36, 0.35);
  --hl-pink:    rgba(244, 114, 182, 0.30);
  --hl-green:   rgba(52, 211, 153, 0.30);
  --hl-blue:    rgba(96, 165, 250, 0.30);
  --hl-purple:  rgba(167, 139, 250, 0.30);
  --hl-orange:  rgba(251, 146, 60, 0.30);
  --hl-teal:    rgba(45, 212, 191, 0.30);
  --hl-red:     rgba(248, 113, 113, 0.30);

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:  0 8px 40px rgba(0,0,0,0.14);

  --scrollbar-track: #ede9e3;
  --scrollbar-thumb: #c4bdb5;

  color-scheme: light;
}

/* ===================== DARK THEME ===================== */
[data-theme="dark"] {
  --bg-page:         #0d0d0d;
  --bg-reading:      #111111;
  --bg-ui:           #1a1a1a;
  --bg-ui-secondary: #222222;
  --bg-hover:        #2a2a2a;
  --bg-overlay:      rgba(13, 13, 13, 0.75);

  --text-primary:    #e8e4de;
  --text-secondary:  #a8a09a;
  --text-muted:      #666058;
  --text-ui:         #d8d0c8;

  --border-color:    #2a2a2a;
  --border-subtle:   #1e1e1e;

  --danger:          #f87171;
  --danger-hover:    #ef4444;

  --accent:          #f59e0b;
  --accent-hover:    #fbbf24;
  --accent-light:    rgba(245, 158, 11, 0.15);

  --hl-yellow:  rgba(251, 191, 36, 0.25);
  --hl-pink:    rgba(244, 114, 182, 0.22);
  --hl-green:   rgba(52, 211, 153, 0.22);
  --hl-blue:    rgba(96, 165, 250, 0.22);
  --hl-purple:  rgba(167, 139, 250, 0.22);
  --hl-orange:  rgba(251, 146, 60, 0.22);
  --hl-teal:    rgba(45, 212, 191, 0.22);
  --hl-red:     rgba(248, 113, 113, 0.22);

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:  0 8px 40px rgba(0,0,0,0.6);

  --scrollbar-track: #1a1a1a;
  --scrollbar-thumb: #333333;

  color-scheme: dark;
}

/* ===================== SEPIA THEME ===================== */
[data-theme="sepia"] {
  --bg-page:         #f4e9d8;
  --bg-reading:      #faf2e4;
  --bg-ui:           #f0e6d3;
  --bg-ui-secondary: #e8deca;
  --bg-hover:        #dfd5c1;
  --bg-overlay:      rgba(244, 233, 216, 0.75);

  --text-primary:    #2c1a0e;
  --text-secondary:  #5c3d28;
  --text-muted:      #9a7a60;
  --text-ui:         #3c2418;

  --border-color:    #d4c4a8;
  --border-subtle:   #e4d8c0;

  --accent:          #8b4513;
  --accent-hover:    #6b3410;
  --accent-light:    rgba(139, 69, 19, 0.12);

  --hl-yellow:  rgba(210, 160, 20, 0.35);
  --hl-pink:    rgba(200, 100, 130, 0.30);
  --hl-green:   rgba(80, 160, 100, 0.30);
  --hl-blue:    rgba(80, 130, 180, 0.30);
  --hl-purple:  rgba(120, 100, 180, 0.30);
  --hl-orange:  rgba(180, 100, 40, 0.30);
  --hl-teal:    rgba(40, 140, 130, 0.30);
  --hl-red:     rgba(180, 60, 60, 0.30);

  --shadow-sm:  0 1px 3px rgba(80,40,0,0.10);
  --shadow-md:  0 4px 16px rgba(80,40,0,0.14);
  --shadow-lg:  0 8px 40px rgba(80,40,0,0.20);

  --scrollbar-track: #e4d8c0;
  --scrollbar-thumb: #c4aa88;

  color-scheme: light;
}