@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap");

:root{
  /* Color system */
  --bg: #0c0f14;
  --surface: #141a22;
  --surface-1: #17202b;
  --surface-2: #1c2430;
  --text: #e7ecf3;
  --muted: #98a2b3;
  --accent: #2ec4b6;
  --accent-2: #5eead4;
  --focus: #7dd3fc;
  --button-secondary-bg: rgba(36, 76, 96, 0.34);
  --button-secondary-border: rgba(88, 156, 170, 0.42);
  --border: #263241;
  --header-bg: rgba(12, 15, 20, 0.9);
  --footer-gradient: linear-gradient(180deg, rgba(14, 22, 34, 0.6), rgba(12, 15, 20, 0));
  --lightbox-backdrop: rgba(6, 10, 15, 0.78);

  /* Theme tokens (suite defaults) */
  --theme-card-bg: rgba(16, 28, 42, 0.7);
  --theme-card-bg-strong: rgba(16, 28, 42, 0.75);
  --theme-card-border: var(--border);
  --theme-panel-bg: var(--surface);
  --theme-code-bg: #0f141c;
  --theme-tag-border: var(--border);
  --theme-tag-text: var(--muted);
  --theme-thumb-border: var(--border);
  --theme-button-secondary-bg: var(--button-secondary-bg);
  --theme-button-secondary-border: var(--button-secondary-border);
  --theme-button-ghost-border: var(--border);
  --theme-button-ghost-text: var(--muted);
  --theme-filter-bg: rgba(12, 22, 34, 0.9);
  --theme-filter-border: rgba(45, 61, 78, 0.95);
  --theme-filter-active-border: rgba(148, 188, 220, 0.95);
  --theme-search-bg: var(--surface);
  --theme-search-border: var(--border);
  --theme-scrollbar-thumb: rgba(52, 68, 84, 0.6);
  --theme-scrollbar-thumb-border: rgba(12, 15, 20, 0.6);
  --theme-scrollbar-track: rgba(12, 15, 20, 0.4);

  /* Suite gradients */
  --gradient-hero: linear-gradient(180deg, rgba(18, 20, 26, 0), rgba(18, 34, 52, 0.35));
  --gradient-suite-map: linear-gradient(180deg, rgba(18, 34, 52, 0.88), rgba(10, 20, 32, 0.35));
  --gradient-suite-hero: linear-gradient(180deg, rgba(12, 15, 20, 0), rgba(14, 24, 38, 0.8));
  --gradient-suite-status: linear-gradient(180deg, rgba(18, 34, 52, 0.88), rgba(12, 15, 20, 0));
  --gradient-suite-shell: linear-gradient(180deg, rgba(12, 15, 20, 0), rgba(16, 28, 42, 0.55), rgba(12, 15, 20, 0));

  /* Library gradients */
  --gradient-page-slab: linear-gradient(180deg, rgba(18, 20, 26, 0.35), rgba(40, 28, 18, 0.7));
  --gradient-library-hero: linear-gradient(180deg, rgba(12, 15, 20, 0), rgba(20, 16, 12, 0.9));
  --gradient-library-filters: linear-gradient(180deg, rgba(40, 28, 18, 0.7), rgba(12, 15, 20, 0));
  --gradient-poem-hero: linear-gradient(180deg, rgba(12, 15, 20, 0), rgba(20, 16, 12, 0.9));
  --gradient-poem-body: linear-gradient(180deg, rgba(40, 28, 18, 0.75), rgba(12, 15, 20, 0));

  /* Badge colors */
  --badge-stable-bg: rgba(46, 196, 182, 0.2);
  --badge-stable-border: rgba(46, 196, 182, 0.4);
  --badge-stable-text: var(--accent-2);
  --badge-beta-bg: rgba(14, 165, 233, 0.2);
  --badge-beta-border: rgba(14, 165, 233, 0.4);
  --badge-beta-text: #7dd3fc;
  --badge-experimental-bg: rgba(248, 113, 113, 0.2);
  --badge-experimental-border: rgba(248, 113, 113, 0.4);
  --badge-experimental-text: #fca5a5;
  --badge-platform-bg: rgba(94, 234, 212, 0.12);
  --badge-platform-border: rgba(94, 234, 212, 0.4);
  --badge-platform-text: var(--accent-2);

  /* Library palette */
  --library-card-bg: rgba(14, 10, 8, 0.92);
  --library-card-bg-secondary: rgba(26, 22, 20, 0.95);
  --library-filter-bg: rgba(20, 14, 10, 0.95);
  --library-border: rgba(76, 58, 44, 0.9);
  --library-border-strong: rgba(148, 120, 92, 0.95);
  --library-border-soft: rgba(64, 54, 46, 0.95);
  --library-muted: rgba(214, 194, 170, 0.7);
  --library-scrollbar-thumb: rgba(78, 62, 48, 0.6);
  --library-scrollbar-thumb-border: rgba(12, 15, 20, 0.6);
  --library-scrollbar-track: rgba(12, 15, 20, 0.4);

  /* Typography */
  --font-body: "Manrope", "Avenir Next", "Avenir", sans-serif;
  --font-mono: "JetBrains Mono", "Fira Mono", monospace;
  --text-sm: 0.9rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem);

  /* Spacing */
  --s-1: 0.35rem;
  --s-2: 0.6rem;
  --s-3: 0.9rem;
  --s-4: 1.25rem;
  --s-5: 2rem;
  --s-6: 3.2rem;

  /* Radii */
  --r-1: 8px;
  --r-2: 14px;

  /* Shadows */
  --shadow-1: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.library-theme,
.poem-body{
  --theme-card-bg: var(--library-card-bg);
  --theme-card-bg-strong: var(--library-card-bg);
  --theme-card-border: var(--library-border);
  --theme-panel-bg: var(--library-card-bg);
  --theme-code-bg: var(--library-card-bg);
  --theme-tag-border: var(--library-border);
  --theme-tag-text: var(--library-muted);
  --theme-thumb-border: var(--library-border);
  --theme-button-secondary-bg: var(--library-card-bg-secondary);
  --theme-button-secondary-border: var(--library-border-soft);
  --theme-button-ghost-border: var(--library-border);
  --theme-button-ghost-text: var(--library-muted);
  --theme-filter-bg: var(--library-filter-bg);
  --theme-filter-border: var(--library-border);
  --theme-filter-active-border: var(--library-border-strong);
  --theme-search-bg: var(--library-card-bg);
  --theme-search-border: var(--library-border);
  --theme-scrollbar-thumb: var(--library-scrollbar-thumb);
  --theme-scrollbar-thumb-border: var(--library-scrollbar-thumb-border);
  --theme-scrollbar-track: var(--library-scrollbar-track);
}