/* ==========================================================================
   MASTER BIBLICAL THEME PALETTES (7 GLOBAL PROFILES)
   ========================================================================== */

/* 1. Anvil & Parchment (Light - Default) */
:root, [data-theme="parchment-gold"] {
  --ui-bg: #f6f0e7;
  --ui-surface: #fbf8f2;
  --ui-surface-2: #ede5d8;
  --ui-ink: #1f2126;
  --ui-muted: #787065;
  --ui-line: #ddd4c4;
  --ui-accent: #ab7425;
  --ui-accent-strong: #8c5d1c;
  --ui-accent-soft: #f0e3ce;
  --ui-focus: #8c5d1c;

  --sky-bright: #ab7425;
  --sky-light: #c58d3c;
  --lime-bright: #936322;
  --lime-light: #ab7425;
  --sun-yellow: #ca8a04;
}

/* 2. Eden & Beryl (Light) */
[data-theme="olive-earth"] {
  --ui-bg: #eef2eb;
  --ui-surface: #f8faf6;
  --ui-surface-2: #e6ece1;
  --ui-ink: #273029;
  --ui-muted: #667166;
  --ui-line: #cad2c6;
  --ui-accent: #667a58;
  --ui-accent-strong: #526b49;
  --ui-accent-soft: #e0e8db;
  --ui-focus: #819178;

  --sky-bright: #0284c7;
  --sky-light: #0369a1;
  --lime-bright: #65a30d;
  --lime-light: #4d7c0f;
  --sun-yellow: #ca8a04;
}

/* 3. Azure & Chalcedony (Light) */
[data-theme="light-word"] {
  --ui-bg: #f2f5f8;
  --ui-surface: #fbfcfd;
  --ui-surface-2: #e8edf2;
  --ui-ink: #25313d;
  --ui-muted: #66727d;
  --ui-line: #ccd5de;
  --ui-accent: #53769b;
  --ui-accent-strong: #416383;
  --ui-accent-soft: #e2e9f0;
  --ui-focus: #718aa3;

  --sky-bright: #0066ff;
  --sky-light: #0044cc;
  --lime-bright: #1d4ed8;
  --lime-light: #1e40af;
  --sun-yellow: #1e3a8a;
}

/* 4. Dawn & Ligure (Light) */
[data-theme="rose-ligure"] {
  --ui-bg: #f5eeec;
  --ui-surface: #fcf9f7;
  --ui-surface-2: #eee1de;
  --ui-ink: #352a2d;
  --ui-muted: #78696c;
  --ui-line: #d8c9ca;
  --ui-accent: #8c5d66;
  --ui-accent-strong: #774853;
  --ui-accent-soft: #eee0e2;
  --ui-focus: #9b7278;

  --sky-bright: #e11d48;
  --sky-light: #be123c;
  --lime-bright: #ea580c;
  --lime-light: #9a3412;
  --sun-yellow: #d900c5;
}

/* 5. Slate & Emerald (Dark) */
[data-theme="slate-emerald"] {
  --ui-bg: #0d0f12;
  --ui-surface: #12161a;
  --ui-surface-2: #171d20;
  --ui-ink: #f3f0e8;
  --ui-muted: #a8ada9;
  --ui-line: #30383a;
  --ui-accent: #8fb79b;
  --ui-accent-strong: #a9d0b1;
  --ui-accent-soft: #1d2923;
  --ui-focus: #7ca18a;

  --sky-bright: #38bdf8;
  --sky-light: #7dd3fc;
  --lime-bright: #a3e635;
  --lime-light: #bef264;
  --sun-yellow: #facc15;
}

/* 6. Ember & Sardius (Dark) */
[data-theme="sunset-fire"] {
  --ui-bg: #17110f;
  --ui-surface: #1e1714;
  --ui-surface-2: #261c18;
  --ui-ink: #f5eee5;
  --ui-muted: #b9aaa1;
  --ui-line: #40302a;
  --ui-accent: #c58c65;
  --ui-accent-strong: #d8a27a;
  --ui-accent-soft: #30221c;
  --ui-focus: #a46b4b;

  --sky-bright: #ff3700;
  --sky-light: #ff8555;
  --lime-bright: #ffaa00;
  --lime-light: #ffc04d;
  --sun-yellow: #ffd000;
}

/* 7. Cobalt & Sapphire (Dark) */
[data-theme="heavenly-blue"] {
  --ui-bg: #0d121b;
  --ui-surface: #111a27;
  --ui-surface-2: #172333;
  --ui-ink: #f1f4f7;
  --ui-muted: #9eabb8;
  --ui-line: #2d3a48;
  --ui-accent: #86a7c8;
  --ui-accent-strong: #a8c4df;
  --ui-accent-soft: #1b2837;
  --ui-focus: #7799bc;

  --sky-bright: #00e1ff;
  --sky-light: #8cf3ff;
  --lime-bright: #60a5fa;
  --lime-light: #bfdbfe;
  --sun-yellow: #a78bfa;
}

/* ============================================================
   DESIGN TOKENS & TYPOGRAPHY
   ============================================================ */
:root {
  --font-serif: 'EB Garamond', Georgia, serif;
  --font-sans: 'Myriad Pro', Myriad, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-ui: var(--font-sans);

  --bg-base: #f9f8f5;
  --bg-surface: #ffffff;
  --bg-subtle: #f2efe9;
  --bg-elevated: #ffffff;
  --bg-glass: rgba(249, 248, 245, 0.88);

  --border-subtle: #e6e2db;
  --border-medium: #d6d0c4;
  --border-focus: #ad782b;

  --accent-gold: #c89b3c;
  --accent-gold-dark: #c89b3c;
  --accent-gold-soft: #fcf6eb;
  --accent-gold-border: #ebd9be;

  --text-main: #20242c;
  --text-secondary: #586171;
  --text-tertiary: #8b95a5;
  --text-correct: #1b633e;
  --text-error: #b91c1c;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-full: 9999px;

  --shadow-soft: 0 4px 20px -2px rgba(40, 32, 20, 0.05), 0 2px 6px -1px rgba(40, 32, 20, 0.03);
  --shadow-lifted: 0 16px 36px -8px rgba(40, 32, 20, 0.08), 0 4px 12px -2px rgba(40, 32, 20, 0.04);
  --shadow-card: 0 10px 30px -4px rgba(44, 38, 27, 0.08);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  color-scheme: light;
}

body {
  background-color: var(--ui-bg);
  color: var(--ui-ink);
  font-family: var(--font-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color 260ms ease, color 260ms ease;
  min-height: 100vh;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  outline: none;
}

.container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 3rem);
}

/* ============================================================
   GLOBAL THEME OVERRIDES
   ============================================================ */
html, body {
  background-color: var(--ui-bg) !important;
  background-image: none !important;
  color: var(--ui-ink) !important;
}

main.editorial-main,
section.workspace-column,
.container {
  background-color: transparent !important;
}


/* ==========================================================================
   COOKIE CONSENT BANNER (Matches Parchment & Dark Forge themes)
   ========================================================================== */
.sf-cookie-banner {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  width: min(720px, calc(100vw - 2rem));
  background: var(--ui-surface, #ffffff);
  border: 1px solid var(--ui-line, #e2e8f0);
  border-radius: 0.75rem;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25);
  z-index: 9999;
  padding: 1rem 1.25rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.sf-cookie-banner.visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.sf-cookie-content {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

@media (min-width: 640px) {
  .sf-cookie-content {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.sf-cookie-text p {
  margin: 0;
  font-family: var(--font-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ui-ink, #1f2937);
}

.sf-cookie-text a {
  color: var(--ui-accent-strong, #ca8a04);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sf-cookie-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.sf-cookie-btn {
  font-family: var(--font-ui, sans-serif);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.45rem 0.85rem;
  border-radius: 0.45rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 120ms ease, border-color 120ms ease;
  white-space: nowrap;
}

.sf-cookie-btn-primary {
  background: var(--ui-accent, #936322);
  color: #ffffff;
  border-color: var(--ui-accent, #936322);
}

.sf-cookie-btn-primary:hover {
  background: var(--ui-accent-strong, #ca8a04);
}

.sf-cookie-btn-secondary {
  background: var(--ui-surface-2, #f8fafc);
  color: var(--ui-muted, #64748b);
  border-color: var(--ui-line, #cbd5e1);
}

.sf-cookie-btn-secondary:hover {
  color: var(--ui-ink, #0f172a);
  background: var(--ui-surface, #ffffff);
}

/* Hidden by default on desktop */
.desktop-required-notice {
  display: none;
}

/* Activate on mobile / tablet screens */
@media (max-width: 768px) {
  /* Show the notice */
  .desktop-required-notice {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.5rem 1.5rem;
    margin: 1.5rem auto;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: 1rem;
    max-width: 480px;
  }

  .notice-icon-box {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--ui-surface-2);
    border: 1px solid var(--ui-line);
    display: grid;
    place-items: center;
    color: var(--ui-accent-strong);
    margin-bottom: 0.75rem;
  }

  .notice-eyebrow {
    font-family: var(--font-ui);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--ui-accent);
    margin-bottom: 0.25rem;
  }

  .notice-title {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ui-ink);
    margin: 0 0 0.5rem;
  }

  .notice-body {
    font-family: var(--font-ui);
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--ui-muted);
    margin: 0 0 1rem;
  }

  .notice-tip {
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ui-ink);
    background: var(--ui-surface-2);
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--ui-line);
  }

@media (max-width: 768px) {
  /* Hide the arena by ID and all its class variations */
  #arena,
  .typing-arena,
  .hymnal-arena,
  .canticle-arena,
  .visual-control-strip,
  .workspace-footer {
    display: none !important;
  }
}

/* Hidden on desktop */
.desktop-required-notice {
  display: none;
}

/* Mobile: Hide entire workspace, show only the overlay between header and footer */
@media (max-width: 768px) {
  /* ONLY hide workspace-column if the desktop notice is actually on the page */
  main:has(.desktop-required-notice) .workspace-column {
    display: none !important;
  }

  /* (Fallback if the notice was placed inside workspace-column on any page) */
  .workspace-column:has(.desktop-required-notice) > *:not(.desktop-required-notice) {
    display: none !important;
  }
}

  /* 2. Vertically center the overlay between header and footer */
  .editorial-main {
    min-height: 65vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
  }

  /* 3. Display the overlay card */
  .desktop-required-notice {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.5rem 1.5rem;
    margin: 0 auto;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: 1rem;
    max-width: 480px;
    width: 100%;
  }

  .notice-icon-box {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--ui-surface-2);
    border: 1px solid var(--ui-line);
    display: grid;
    place-items: center;
    color: var(--ui-accent-strong);
    margin-bottom: 0.75rem;
  }

  .notice-eyebrow {
    font-family: var(--font-ui);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--ui-accent);
    margin-bottom: 0.25rem;
  }

  .notice-title {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ui-ink);
    margin: 0 0 0.5rem;
  }

  .notice-body {
    font-family: var(--font-ui);
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--ui-muted);
    margin: 0 0 1rem;
  }

  .notice-tip {
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ui-ink);
    background: var(--ui-surface-2);
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--ui-line);
  }
}