/*
  Washington Theatre theme presets

  To switch the entire website theme, edit SITE_THEME in:
  assets/js/theme.js

  Available presets:
  - classic-gold
  - burgundy-curtain
  - midnight-blue
  - emerald-stage
  - marquee-light
  - brick-marquee

  Add future presets by copying one [data-theme="..."] block and changing
  only the variables below. Layout and component styling live in styles.css.
*/

/* Default/fallback theme when JavaScript is unavailable. */
:root,
[data-theme="classic-gold"] {
  color-scheme: dark;

  --color-page: #090b0e;
  --color-page-end: #0d1015;
  --color-surface: #12161d;
  --color-surface-2: #1a2029;
  --color-text: #f6f0e3;
  --color-text-soft: #e8e1d5;
  --color-muted: #b8b1a4;
  --color-nav-text: #e9e3d8;
  --color-accent: #d8aa54;
  --color-accent-bright: #f3d08c;
  --color-accent-contrast: #17120a;
  --color-on-image: #ffffff;
  --color-feature-text: #e7dfd2;
  --color-notice-text: #eee5d7;
  --color-border: rgba(255, 255, 255, 0.12);
  --color-input-border: rgba(255, 255, 255, 0.18);
  --color-ghost-border: rgba(255, 255, 255, 0.25);
  --color-header: rgba(10, 12, 16, 0.9);
  --color-footer: #080a0d;
  --color-input: #0d1117;
  --color-skip-bg: #ffffff;
  --color-skip-text: #111111;
  --color-seating-bg: #f4f0e8;
  --color-shadow: rgba(0, 0, 0, 0.38);

  --surface-subtle: rgba(255, 255, 255, 0.035);
  --card-gradient: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
  --page-background:
    radial-gradient(circle at 85% 5%, rgba(216, 170, 84, 0.11), transparent 28rem),
    linear-gradient(180deg, var(--color-page) 0%, var(--color-page-end) 100%);
  --accent-soft: rgba(216, 170, 84, 0.12);
  --accent-softer: rgba(216, 170, 84, 0.09);
  --accent-medium: rgba(216, 170, 84, 0.25);
  --accent-strong: rgba(216, 170, 84, 0.55);
  --accent-ring: rgba(243, 208, 140, 0.45);
  --accent-mark-border: rgba(243, 208, 140, 0.5);
  --ghost-bg: rgba(10, 12, 16, 0.58);
  --ghost-hover: rgba(255, 255, 255, 0.1);
  --hero-overlay:
    linear-gradient(90deg, rgba(7, 9, 12, 0.96) 0%, rgba(7, 9, 12, 0.65) 48%, rgba(7, 9, 12, 0.25) 100%),
    linear-gradient(0deg, rgba(7, 9, 12, 0.98) 0%, rgba(7, 9, 12, 0.04) 65%);
  --hero-overlay-mobile: linear-gradient(0deg, rgba(7, 9, 12, 0.99), rgba(7, 9, 12, 0.42));
  --placeholder-background:
    radial-gradient(circle at 30% 20%, rgba(216, 170, 84, 0.24), transparent 18rem),
    linear-gradient(135deg, #2b1518, #111720 62%, #272010);
  --placeholder-text: rgba(255, 255, 255, 0.86);
}

[data-theme="burgundy-curtain"] {
  color-scheme: dark;

  --color-page: #10080b;
  --color-page-end: #1a0d12;
  --color-surface: #211217;
  --color-surface-2: #30191f;
  --color-text: #fff4e8;
  --color-text-soft: #f4dfd2;
  --color-muted: #c5aeb0;
  --color-nav-text: #f0dfe0;
  --color-accent: #b83a48;
  --color-accent-bright: #ef7580;
  --color-accent-contrast: #23080d;
  --color-on-image: #ffffff;
  --color-feature-text: #f1d9d7;
  --color-notice-text: #ffe8df;
  --color-border: rgba(255, 228, 220, 0.14);
  --color-input-border: rgba(255, 228, 220, 0.2);
  --color-ghost-border: rgba(255, 228, 220, 0.28);
  --color-header: rgba(16, 8, 11, 0.92);
  --color-footer: #0b0507;
  --color-input: #170b0f;
  --color-skip-bg: #fff4e8;
  --color-skip-text: #22090e;
  --color-seating-bg: #fff5e9;
  --color-shadow: rgba(0, 0, 0, 0.42);

  --surface-subtle: rgba(255, 235, 228, 0.04);
  --card-gradient: linear-gradient(145deg, rgba(255, 230, 223, 0.075), rgba(255, 230, 223, 0.025));
  --page-background:
    radial-gradient(circle at 85% 5%, rgba(184, 58, 72, 0.18), transparent 28rem),
    linear-gradient(180deg, var(--color-page) 0%, var(--color-page-end) 100%);
  --accent-soft: rgba(184, 58, 72, 0.17);
  --accent-softer: rgba(184, 58, 72, 0.12);
  --accent-medium: rgba(239, 117, 128, 0.28);
  --accent-strong: rgba(239, 117, 128, 0.58);
  --accent-ring: rgba(239, 117, 128, 0.48);
  --accent-mark-border: rgba(239, 117, 128, 0.52);
  --ghost-bg: rgba(16, 8, 11, 0.62);
  --ghost-hover: rgba(255, 235, 228, 0.11);
  --hero-overlay:
    linear-gradient(90deg, rgba(20, 5, 10, 0.97) 0%, rgba(31, 8, 15, 0.69) 48%, rgba(31, 8, 15, 0.3) 100%),
    linear-gradient(0deg, rgba(16, 5, 9, 0.99) 0%, rgba(16, 5, 9, 0.08) 65%);
  --hero-overlay-mobile: linear-gradient(0deg, rgba(16, 5, 9, 0.99), rgba(31, 8, 15, 0.48));
  --placeholder-background:
    radial-gradient(circle at 30% 20%, rgba(239, 117, 128, 0.28), transparent 18rem),
    linear-gradient(135deg, #4a111c, #1d0d13 62%, #33151b);
  --placeholder-text: rgba(255, 244, 232, 0.9);
}

[data-theme="midnight-blue"] {
  color-scheme: dark;

  --color-page: #07101b;
  --color-page-end: #0b1827;
  --color-surface: #101f31;
  --color-surface-2: #172b42;
  --color-text: #f1f7ff;
  --color-text-soft: #d9e8f8;
  --color-muted: #9fb3c8;
  --color-nav-text: #dce9f7;
  --color-accent: #3d91c9;
  --color-accent-bright: #86caf2;
  --color-accent-contrast: #04131f;
  --color-on-image: #ffffff;
  --color-feature-text: #d7e8f7;
  --color-notice-text: #e5f3ff;
  --color-border: rgba(203, 230, 255, 0.14);
  --color-input-border: rgba(203, 230, 255, 0.2);
  --color-ghost-border: rgba(203, 230, 255, 0.28);
  --color-header: rgba(7, 16, 27, 0.92);
  --color-footer: #050b12;
  --color-input: #0a1623;
  --color-skip-bg: #f1f7ff;
  --color-skip-text: #07101b;
  --color-seating-bg: #eef5fa;
  --color-shadow: rgba(0, 0, 0, 0.4);

  --surface-subtle: rgba(203, 230, 255, 0.04);
  --card-gradient: linear-gradient(145deg, rgba(203, 230, 255, 0.075), rgba(203, 230, 255, 0.025));
  --page-background:
    radial-gradient(circle at 85% 5%, rgba(61, 145, 201, 0.17), transparent 28rem),
    linear-gradient(180deg, var(--color-page) 0%, var(--color-page-end) 100%);
  --accent-soft: rgba(61, 145, 201, 0.16);
  --accent-softer: rgba(61, 145, 201, 0.11);
  --accent-medium: rgba(134, 202, 242, 0.27);
  --accent-strong: rgba(134, 202, 242, 0.58);
  --accent-ring: rgba(134, 202, 242, 0.48);
  --accent-mark-border: rgba(134, 202, 242, 0.52);
  --ghost-bg: rgba(7, 16, 27, 0.62);
  --ghost-hover: rgba(203, 230, 255, 0.11);
  --hero-overlay:
    linear-gradient(90deg, rgba(4, 13, 23, 0.97) 0%, rgba(5, 24, 40, 0.7) 48%, rgba(5, 24, 40, 0.3) 100%),
    linear-gradient(0deg, rgba(4, 13, 23, 0.99) 0%, rgba(4, 13, 23, 0.06) 65%);
  --hero-overlay-mobile: linear-gradient(0deg, rgba(4, 13, 23, 0.99), rgba(5, 24, 40, 0.48));
  --placeholder-background:
    radial-gradient(circle at 30% 20%, rgba(134, 202, 242, 0.28), transparent 18rem),
    linear-gradient(135deg, #102f4c, #0b1725 62%, #17334a);
  --placeholder-text: rgba(241, 247, 255, 0.9);
}

[data-theme="emerald-stage"] {
  color-scheme: dark;

  --color-page: #07110e;
  --color-page-end: #0b1a15;
  --color-surface: #10231c;
  --color-surface-2: #183127;
  --color-text: #f1faef;
  --color-text-soft: #dcefd9;
  --color-muted: #a5baa8;
  --color-nav-text: #dcebdd;
  --color-accent: #3b9b70;
  --color-accent-bright: #8bd5ad;
  --color-accent-contrast: #04160e;
  --color-on-image: #ffffff;
  --color-feature-text: #d8ebdc;
  --color-notice-text: #e4f7e8;
  --color-border: rgba(216, 244, 223, 0.14);
  --color-input-border: rgba(216, 244, 223, 0.2);
  --color-ghost-border: rgba(216, 244, 223, 0.28);
  --color-header: rgba(7, 17, 14, 0.92);
  --color-footer: #050d0a;
  --color-input: #0a1712;
  --color-skip-bg: #f1faef;
  --color-skip-text: #07110e;
  --color-seating-bg: #f0f5ec;
  --color-shadow: rgba(0, 0, 0, 0.4);

  --surface-subtle: rgba(216, 244, 223, 0.04);
  --card-gradient: linear-gradient(145deg, rgba(216, 244, 223, 0.075), rgba(216, 244, 223, 0.025));
  --page-background:
    radial-gradient(circle at 85% 5%, rgba(59, 155, 112, 0.18), transparent 28rem),
    linear-gradient(180deg, var(--color-page) 0%, var(--color-page-end) 100%);
  --accent-soft: rgba(59, 155, 112, 0.17);
  --accent-softer: rgba(59, 155, 112, 0.12);
  --accent-medium: rgba(139, 213, 173, 0.28);
  --accent-strong: rgba(139, 213, 173, 0.58);
  --accent-ring: rgba(139, 213, 173, 0.48);
  --accent-mark-border: rgba(139, 213, 173, 0.52);
  --ghost-bg: rgba(7, 17, 14, 0.62);
  --ghost-hover: rgba(216, 244, 223, 0.11);
  --hero-overlay:
    linear-gradient(90deg, rgba(4, 15, 11, 0.97) 0%, rgba(5, 28, 20, 0.7) 48%, rgba(5, 28, 20, 0.3) 100%),
    linear-gradient(0deg, rgba(4, 15, 11, 0.99) 0%, rgba(4, 15, 11, 0.06) 65%);
  --hero-overlay-mobile: linear-gradient(0deg, rgba(4, 15, 11, 0.99), rgba(5, 28, 20, 0.48));
  --placeholder-background:
    radial-gradient(circle at 30% 20%, rgba(139, 213, 173, 0.27), transparent 18rem),
    linear-gradient(135deg, #12422f, #0a1b14 62%, #173a2d);
  --placeholder-text: rgba(241, 250, 239, 0.9);
}

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

  --color-page: #f7f1e6;
  --color-page-end: #fffaf2;
  --color-surface: #fffdf8;
  --color-surface-2: #eee4d4;
  --color-text: #271d18;
  --color-text-soft: #493a31;
  --color-muted: #725f53;
  --color-nav-text: #352820;
  --color-accent: #9a2633;
  --color-accent-bright: #c94d59;
  --color-accent-contrast: #ffffff;
  --color-on-image: #ffffff;
  --color-feature-text: #3f3028;
  --color-notice-text: #3d2a24;
  --color-border: rgba(68, 43, 29, 0.16);
  --color-input-border: rgba(68, 43, 29, 0.25);
  --color-ghost-border: rgba(255, 255, 255, 0.34);
  --color-header: rgba(255, 250, 242, 0.94);
  --color-footer: #e8dcc9;
  --color-input: #fffdf8;
  --color-skip-bg: #271d18;
  --color-skip-text: #ffffff;
  --color-seating-bg: #ffffff;
  --color-shadow: rgba(73, 48, 33, 0.15);

  --surface-subtle: rgba(92, 59, 38, 0.045);
  --card-gradient: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(245, 236, 222, 0.88));
  --page-background:
    radial-gradient(circle at 85% 5%, rgba(154, 38, 51, 0.09), transparent 28rem),
    linear-gradient(180deg, var(--color-page) 0%, var(--color-page-end) 100%);
  --accent-soft: rgba(154, 38, 51, 0.1);
  --accent-softer: rgba(154, 38, 51, 0.075);
  --accent-medium: rgba(154, 38, 51, 0.2);
  --accent-strong: rgba(154, 38, 51, 0.48);
  --accent-ring: rgba(154, 38, 51, 0.35);
  --accent-mark-border: rgba(154, 38, 51, 0.42);
  --ghost-bg: rgba(26, 15, 11, 0.58);
  --ghost-hover: rgba(255, 255, 255, 0.15);
  --hero-overlay:
    linear-gradient(90deg, rgba(22, 12, 8, 0.94) 0%, rgba(22, 12, 8, 0.63) 48%, rgba(22, 12, 8, 0.22) 100%),
    linear-gradient(0deg, rgba(22, 12, 8, 0.96) 0%, rgba(22, 12, 8, 0.03) 65%);
  --hero-overlay-mobile: linear-gradient(0deg, rgba(22, 12, 8, 0.98), rgba(22, 12, 8, 0.4));
  --placeholder-background:
    radial-gradient(circle at 30% 20%, rgba(201, 77, 89, 0.24), transparent 18rem),
    linear-gradient(135deg, #67202a, #2c1917 62%, #5b3929);
  --placeholder-text: rgba(255, 255, 255, 0.92);
}

/* =========================================================
   Brick & Marquee
   White background, brick-red headings/navigation,
   warm yellow buttons, and black body text.
   ========================================================= */

[data-theme="brick-marquee"] {
  color-scheme: light;

  /* Core page colors */
  --color-page: #ffffff;
  --color-page-end: #ffffff;
  --color-surface: #ffffff;
  --color-surface-2: #f4f1eb;

  /* Text colors */
  --color-text: #111111;
  --color-text-soft: #242424;
  --color-muted: #5e5e5e;
  --color-feature-text: #111111;
  --color-notice-text: #111111;

  /* Header and navigation */
  --color-header-text: #9f382f;
  --color-nav-text: #9f382f;
  --color-header: rgba(255, 255, 255, 0.96);

  /* Main accent colors */
  --color-accent: #e0b538;
  --color-accent-bright: #9f382f;
  --color-accent-contrast: #171100;
  --color-button-hover: #f0ca57;

  /* Text displayed over photographs */
  --color-on-image: #ffffff;

  /* Borders and form elements */
  --color-border: rgba(17, 17, 17, 0.14);
  --color-input-border: rgba(17, 17, 17, 0.24);
  --color-ghost-border: rgba(255, 255, 255, 0.45);
  --color-input: #ffffff;

  /* Footer and utility colors */
  --color-footer: #f4f1eb;
  --color-skip-bg: #9f382f;
  --color-skip-text: #ffffff;
  --color-seating-bg: #ffffff;
  --color-shadow: rgba(40, 28, 20, 0.14);

  /* Subtle component backgrounds */
  --surface-subtle: rgba(159, 56, 47, 0.045);

  --card-gradient:
    linear-gradient(
      145deg,
      #ffffff,
      #faf8f3
    );

  --page-background: #ffffff;

  /* Yellow accent transparencies */
  --accent-soft: rgba(224, 181, 56, 0.18);
  --accent-softer: rgba(224, 181, 56, 0.11);
  --accent-medium: rgba(224, 181, 56, 0.32);

  /* Brick-red accent transparencies */
  --accent-strong: rgba(159, 56, 47, 0.55);
  --accent-ring: rgba(159, 56, 47, 0.34);
  --accent-mark-border: rgba(159, 56, 47, 0.45);

  /* Buttons displayed over photographs */
  --ghost-bg: rgba(20, 12, 8, 0.66);
  --ghost-hover: rgba(20, 12, 8, 0.82);

  /* Homepage hero photograph overlays */
  --hero-overlay:
    linear-gradient(
      90deg,
      rgba(20, 12, 8, 0.92) 0%,
      rgba(20, 12, 8, 0.61) 48%,
      rgba(20, 12, 8, 0.18) 100%
    ),
    linear-gradient(
      0deg,
      rgba(20, 12, 8, 0.94) 0%,
      rgba(20, 12, 8, 0.02) 65%
    );

  --hero-overlay-mobile:
    linear-gradient(
      0deg,
      rgba(20, 12, 8, 0.96),
      rgba(20, 12, 8, 0.38)
    );

  /* Placeholder event artwork */
  --placeholder-background:
    radial-gradient(
      circle at 30% 20%,
      rgba(224, 181, 56, 0.72),
      transparent 18rem
    ),
    linear-gradient(
      135deg,
      #9f382f,
      #70271f 62%,
      #d2a62e
    );

  --placeholder-text: #ffffff;
}


/* ---------------------------------------------------------
   Brick-red header text
   --------------------------------------------------------- */

[data-theme="brick-marquee"] .brand,
[data-theme="brick-marquee"] .brand-mark,
[data-theme="brick-marquee"] .brand-text span,
[data-theme="brick-marquee"] .site-nav a,
[data-theme="brick-marquee"] .nav-toggle {
  color: var(--color-header-text);
}

[data-theme="brick-marquee"] .site-nav a:hover,
[data-theme="brick-marquee"] .site-nav a[aria-current="page"] {
  color: var(--color-header-text);
}


/* ---------------------------------------------------------
   Keep both normal and hovered buttons yellow
   --------------------------------------------------------- */

[data-theme="brick-marquee"] .button {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}

[data-theme="brick-marquee"] .button:hover {
  background: var(--color-button-hover);
  color: var(--color-accent-contrast);
}


/* Preserve the dark transparent appearance of ghost buttons */
[data-theme="brick-marquee"] .button--ghost {
  background: var(--ghost-bg);
  color: var(--color-on-image);
}

[data-theme="brick-marquee"] .button--ghost:hover {
  background: var(--ghost-hover);
  color: var(--color-on-image);
}