/* ==========================================================================
   Readers Club Study Centre — Theme tokens
   --------------------------------------------------------------------------
   Three themes, one token contract. Every component in app.css and admin.css
   reads only from these variables, so adding a fourth theme means adding one
   [data-theme] block and nothing else.

   Palette origin: the reserve / tiger reference — deep forest green,
   amber-gold accent, warm cream type.
   ========================================================================== */

:root {
  /* Type */
  --font-display: "Playfair Display", "Georgia", "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 3rem;
  --fs-5xl: 4rem;

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;

  /* Spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 380ms;

  /* Layout */
  --sidebar-w: 264px;
  --sidebar-w-collapsed: 74px;
  --topbar-h: 64px;
  --container: 1220px;

  /* Semantic hues shared by all themes */
  --hue-success: 152;
  --hue-info: 199;
  --hue-warning: 38;
  --hue-danger: 4;
}

/* ==========================================================================
   TIGER DARK — the house theme
   ========================================================================== */
[data-theme="tiger-dark"] {
  --bg: #0a1710;
  --bg-deep: #060f0a;
  --bg-alt: #0d1f16;
  --surface: #10281b;
  --surface-2: #16341f;
  --surface-3: #1c3f27;
  --surface-glass: rgba(20, 46, 30, 0.72);

  --border: rgba(224, 164, 34, 0.14);
  --border-strong: rgba(224, 164, 34, 0.3);
  --border-soft: rgba(245, 239, 224, 0.07);

  --text: #f2ecdd;
  --text-strong: #fbf7ee;
  --text-muted: #92a695;
  --text-dim: #6b7d6f;
  --text-inverse: #0a1710;

  --accent: #e0a422;
  --accent-hover: #f0b634;
  --accent-soft: rgba(224, 164, 34, 0.14);
  --accent-ring: rgba(224, 164, 34, 0.32);
  --accent-contrast: #14240f;

  --secondary: #4a8c5f;
  --secondary-soft: rgba(74, 140, 95, 0.16);

  --success: #46b47a;
  --success-soft: rgba(70, 180, 122, 0.15);
  --info: #4aa8d8;
  --info-soft: rgba(74, 168, 216, 0.15);
  --warning: #e0a422;
  --warning-soft: rgba(224, 164, 34, 0.16);
  --danger: #e2685c;
  --danger-soft: rgba(226, 104, 92, 0.16);
  --muted: #7c8f81;
  --muted-soft: rgba(124, 143, 129, 0.16);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow: 0 4px 18px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.52);
  --shadow-accent: 0 8px 26px rgba(224, 164, 34, 0.22);

  --stripe: rgba(255, 255, 255, 0.014);
  --overlay: rgba(4, 12, 8, 0.76);

  --chart-grid: rgba(245, 239, 224, 0.07);
  color-scheme: dark;
}

/* ==========================================================================
   TIGER LIGHT — same character, daylight rooms
   ========================================================================== */
[data-theme="tiger-light"] {
  --bg: #faf6ec;
  --bg-deep: #f2ecdc;
  --bg-alt: #fffdf7;
  --surface: #ffffff;
  --surface-2: #fbf7ed;
  --surface-3: #f4eeddff;
  --surface-glass: rgba(255, 255, 255, 0.86);

  --border: rgba(29, 42, 32, 0.12);
  --border-strong: rgba(194, 135, 10, 0.38);
  --border-soft: rgba(29, 42, 32, 0.07);

  --text: #26332a;
  --text-strong: #121d16;
  --text-muted: #5f7166;
  --text-dim: #8a998e;
  --text-inverse: #fffdf7;

  --accent: #b8790a;
  --accent-hover: #a06806;
  --accent-soft: rgba(194, 135, 10, 0.12);
  --accent-ring: rgba(194, 135, 10, 0.3);
  --accent-contrast: #fffdf7;

  --secondary: #2f6b45;
  --secondary-soft: rgba(47, 107, 69, 0.12);

  --success: #227a4d;
  --success-soft: rgba(34, 122, 77, 0.13);
  --info: #1c6f9c;
  --info-soft: rgba(28, 111, 156, 0.12);
  --warning: #a8720a;
  --warning-soft: rgba(168, 114, 10, 0.14);
  --danger: #b8362b;
  --danger-soft: rgba(184, 54, 43, 0.12);
  --muted: #6b7d70;
  --muted-soft: rgba(107, 125, 112, 0.13);

  --shadow-sm: 0 1px 2px rgba(29, 42, 32, 0.07);
  --shadow: 0 4px 16px rgba(29, 42, 32, 0.09);
  --shadow-lg: 0 18px 44px rgba(29, 42, 32, 0.13);
  --shadow-accent: 0 8px 22px rgba(194, 135, 10, 0.2);

  --stripe: rgba(29, 42, 32, 0.014);
  --overlay: rgba(29, 42, 32, 0.42);

  --chart-grid: rgba(29, 42, 32, 0.08);
  color-scheme: light;
}

/* ==========================================================================
   CLASSIC — neutral, minimum distraction
   ========================================================================== */
[data-theme="classic"] {
  --bg: #f1f5f9;
  --bg-deep: #e6ecf2;
  --bg-alt: #ffffff;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --surface-3: #eef2f7;
  --surface-glass: rgba(255, 255, 255, 0.88);

  --border: rgba(15, 23, 42, 0.11);
  --border-strong: rgba(37, 99, 235, 0.34);
  --border-soft: rgba(15, 23, 42, 0.06);

  --text: #1e293b;
  --text-strong: #0f172a;
  --text-muted: #64748b;
  --text-dim: #94a3b8;
  --text-inverse: #ffffff;

  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-soft: rgba(37, 99, 235, 0.1);
  --accent-ring: rgba(37, 99, 235, 0.3);
  --accent-contrast: #ffffff;

  --secondary: #475569;
  --secondary-soft: rgba(71, 85, 105, 0.1);

  --success: #15803d;
  --success-soft: rgba(21, 128, 61, 0.11);
  --info: #0369a1;
  --info-soft: rgba(3, 105, 161, 0.11);
  --warning: #b45309;
  --warning-soft: rgba(180, 83, 9, 0.12);
  --danger: #b91c1c;
  --danger-soft: rgba(185, 28, 28, 0.11);
  --muted: #64748b;
  --muted-soft: rgba(100, 116, 139, 0.12);

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12);
  --shadow-accent: 0 8px 20px rgba(37, 99, 235, 0.18);

  --stripe: transparent;
  --overlay: rgba(15, 23, 42, 0.45);

  --chart-grid: rgba(15, 23, 42, 0.08);
  color-scheme: light;
}

/* Fall back to the house theme if the attribute is missing */
html:not([data-theme]) {
  --bg: #0a1710;
  --surface: #10281b;
  --text: #f2ecdd;
  --accent: #e0a422;
}

/* ==========================================================================
   Density — compact trims vertical rhythm for data-dense admin screens
   ========================================================================== */
[data-density="compact"] {
  --sp-4: 0.75rem;
  --sp-5: 0.9rem;
  --sp-6: 1.1rem;
  --sp-8: 1.5rem;
  --fs-base: 0.875rem;
  --fs-sm: 0.78125rem;
  --topbar-h: 56px;
}

/* Users who prefer reduced motion get none of it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}