@layer tokens {
  /* ===================================================
     Aqua (Pillar: aqua)
     Light: Apricot Bloom | Dark: Dusky Apricot
     Version: 2.3  Apricot Luxe Refresh (2026)
     Notes:
     - Richer luminous apricot-golds, smoother illuminated gradients
     - Enhanced depth, glow & readability while keeping the warm dusky/parchment soul
     - Full token parity with all other pillars
     - Painter-safe & fully tokenised
     =================================================== */

  /* =========================
     DARK MODE (Dusky Apricot)
     ========================= */
  html[data-theme="dark"] body.aqua {
    /* Core */
    --bg-opacity: 0.17 !important;

    --bg-primary: #1c1712 !important;
    --bg-gradient: var(--bg-primary) !important;
    background: var(--bg-primary) !important;
    --bg-secondary: #2c221b !important;
    --bg-wash: rgba(20, 16, 13, 0.94) !important;

    --text-primary: #f5f1e7 !important;
    --text-secondary: #c8b8a4 !important;
    --text-muted: #a38f72 !important;
    --text-base: var(--text-primary) !important;

    /* Accents – richer luminous apricot */
    --text-accent: #f4d9b2 !important;
    --accent: var(--text-accent) !important;
    --accent-page: #e8c69f !important;

    --highlight: #f8e4c4 !important;
    --shadow-glow: rgba(244, 200, 140, 0.32) !important;

    --glyph-color: #ffe9cc !important;
    --strong-text: #f0d0a8 !important;
    --cite-color: #e8c69f !important;

    /* Surfaces */
    --bg-alt: rgba(28, 22, 17, 0.96) !important;
    --bg-surface: rgba(18, 14, 11, 0.90) !important;

    --card-gradient: color-mix(in srgb, var(--bg-secondary) 94%, var(--highlight) 6%) !important;

    /* Section defaults */
    --section-bg-top: #2c221b !important;
    --section-bg-bottom: #3d2e24 !important;
    --section-border: rgba(244, 200, 140, 0.52) !important;
    --section-subtitle-color: var(--text-secondary) !important;

    /* Links */
    --link-color: var(--text-accent) !important;
    --link-hover: var(--highlight) !important;

    /* Borders & tones */
    --border-accent: rgba(244, 200, 140, 0.42) !important;
    --gold-border: rgba(244, 200, 140, 0.42) !important;
    --gold-tone: #ffe9cc !important;

    --soft-gold: #f5d8af !important;
    --golden-blaze: #ffe9cc !important;

    --accent-soft: rgba(244, 200, 140, 0.24) !important;
    --accent-soft-glow: rgba(244, 200, 140, 0.34) !important;
    --accent-glow: rgba(248, 228, 196, 0.52) !important;

    /* Shadows – deeper & dramatic */
    --page-box-shadow: 0 0 24px rgba(244, 200, 140, 0.24) !important;
    --page-shadow-soft: 0 12px 30px rgba(0,0,0,0.35) !important;
    --glow-soft: 0 12px 26px rgba(244, 200, 140, 0.22) !important;
    --glow-strong: 0 20px 36px rgba(244, 200, 140, 0.32) !important;

    --accent-gradient: linear-gradient(145deg, #f8e4c4, #f4d9b2) !important;
    --bg: var(--bg-primary) !important;

    /* Inputs */
    --input-bg: #2c221b !important;
    --input-bg-focus: #3d2e24 !important;
    --input-border: rgba(255, 255, 255, 0.18) !important;
    --input-text: #f5f1e7 !important;
    --input-placeholder: rgba(245, 241, 231, 0.58) !important;

    /* Badge tokens */
    --badge-bg: rgba(244, 200, 140, 0.42) !important;
    --badge-text: #ffe9cc !important;
    --badge-border: rgba(244, 200, 140, 0.48) !important;
    --badge-shadow: 0 2px 8px rgba(244, 200, 140, 0.26) !important;

    /* Footer */
    --footer-opacity: 0.83 !important;

    /* Painter overlay */
    --overlay-bg-gradient: linear-gradient(
      to right,
      rgba(44, 34, 27, 0.38),
      rgba(94, 67, 48, 0.34)
    ) !important;

    --bg-gradient: var(--overlay-bg-gradient) !important;
  }

  /* Component overrides – dark */
  html[data-theme="dark"] body.aqua .site-header,
  html[data-theme="dark"] body.aqua .site-footer {
    background: linear-gradient(to bottom, #1c1712, #2c221b) !important;
    color: var(--text-accent) !important;
    border-bottom: 1px solid var(--highlight) !important;
  }

  html[data-theme="dark"] body.aqua .section-block {
    background: var(--section-bg-top) !important;
    border-color: var(--section-border) !important;
    box-shadow: var(--page-box-shadow) !important;
  }

  html[data-theme="dark"] body.aqua .section-block p,
  html[data-theme="dark"] body.aqua .section-block li {
    text-shadow: 0 1px 3px rgba(0,0,0,0.40) !important;
  }

  html[data-theme="dark"] body.aqua .image-block {
    border: 1px solid var(--section-border) !important;
    box-shadow: 0 0 20px rgba(248, 228, 196, 0.14) !important;
  }

  html[data-theme="dark"] body.aqua .quiz-question,
  html[data-theme="dark"] body.aqua .quiz-prompt {
    background: linear-gradient(to right, #3d2e24, #523f2f) !important;
    color: var(--strong-text) !important;
    border-left: 4px solid var(--glyph-color) !important;
    box-shadow: 0 0 16px rgba(248, 228, 196, 0.16) !important;
  }

  html[data-theme="dark"] body.aqua .quiz-options {
    background: #1c1712 !important;
    border: 1px solid var(--section-border) !important;
  }

  html[data-theme="dark"] body.aqua .quiz-options button,
  html[data-theme="dark"] body.aqua .quiz-button {
    background: #2c221b !important;
    color: var(--strong-text) !important;
    border: 2px solid var(--glyph-color) !important;
    box-shadow: 0 0 8px rgba(248, 228, 196, 0.14) inset !important;
  }

  html[data-theme="dark"] body.aqua .quiz-options button:hover,
  html[data-theme="dark"] body.aqua .quiz-button:hover {
    background: #3d2e24 !important;
    color: #f5f1e7 !important;
    border-color: #f8e4c4 !important;
    box-shadow: 0 0 16px var(--shadow-glow) !important;
  }

  /* =========================
     LIGHT MODE (Apricot Bloom)
     ========================= */
  html[data-theme="light"] body.aqua {
    /* Core */
    --bg-opacity: 0.33 !important;

    --bg-primary: #fff8f0 !important;
    --bg-gradient: var(--bg-primary) !important;
    background: var(--bg-primary) !important;
    --bg-secondary: #fdf0e0 !important;
    --bg-wash: rgba(255, 255, 255, 0.93) !important;

    --text-primary: #241e18 !important;
    --text-secondary: #5a4a3c !important;
    --text-muted: #76654f !important;
    --text-base: var(--text-primary) !important;

    /* Accents – richer luminous apricot */
    --text-accent: #d98c4f !important;
    --accent: var(--text-accent) !important;
    --accent-page: #e8a76c !important;

    --highlight: #f5d8af !important;
    --shadow-glow: rgba(244, 200, 140, 0.26) !important;

    --glyph-color: #f0c38f !important;
    --strong-text: #d98c4f !important;
    --cite-color: #d98c4f !important;

    /* Surfaces */
    --bg-alt: #fff4e6 !important;
    --bg-surface: var(--bg-primary) !important;

    --card-gradient: color-mix(in srgb, var(--bg-secondary) 94%, var(--highlight) 6%) !important;

    /* Section defaults */
    --section-bg-top: #fdf0e0 !important;
    --section-bg-bottom: #f9e4ce !important;
    --section-border: rgba(244, 200, 140, 0.42) !important;
    --section-subtitle-color: var(--text-secondary) !important;

    /* Links */
    --link-color: var(--text-accent) !important;
    --link-hover: var(--highlight) !important;

    /* Borders & tones */
    --border-accent: rgba(244, 200, 140, 0.32) !important;
    --gold-border: rgba(244, 200, 140, 0.38) !important;
    --gold-tone: #f0c38f !important;

    --soft-gold: #f5d8af !important;
    --golden-blaze: #ffe9cc !important;

    --accent-soft: rgba(244, 200, 140, 0.26) !important;
    --accent-soft-glow: rgba(244, 200, 140, 0.36) !important;
    --accent-glow: rgba(245, 216, 175, 0.72) !important;

    /* Shadows – softer & premium */
    --page-box-shadow: 0 0 20px rgba(244, 200, 140, 0.20) !important;
    --page-shadow-soft: 0 12px 28px rgba(0,0,0,0.09) !important;
    --glow-soft: 0 10px 22px rgba(244, 200, 140, 0.18) !important;
    --glow-strong: 0 18px 32px rgba(244, 200, 140, 0.26) !important;

    --accent-gradient: linear-gradient(145deg, #f5d8af, #d98c4f) !important;
    --bg: var(--bg-primary) !important;

    /* Inputs */
    --input-bg: #fdf0e0 !important;
    --input-bg-focus: #fff8f0 !important;
    --input-border: rgba(36, 30, 24, 0.26) !important;
    --input-text: #241e18 !important;
    --input-placeholder: rgba(36, 30, 24, 0.52) !important;

    /* Badge tokens */
    --badge-bg: rgba(245, 221, 192, 0.82) !important;
    --badge-text: #ac6839 !important;
    --badge-border: rgba(244, 200, 140, 0.48) !important;
    --badge-shadow: 0 2px 8px rgba(244, 200, 140, 0.22) !important;

    /* Footer */
    --footer-opacity: 0.94 !important;

    /* Painter overlay */
    --overlay-bg-gradient: linear-gradient(
      to right,
      rgba(255, 248, 240, 0.38),
      rgba(244, 200, 140, 0.28)
    ) !important;

    --bg-gradient: var(--overlay-bg-gradient) !important;
  }

  /* Component overrides – light */
  html[data-theme="light"] body.aqua .site-header,
  html[data-theme="light"] body.aqua .site-footer {
    background: linear-gradient(to bottom, #fffdf9, #fdf0e0) !important;
    color: var(--text-accent) !important;
    border-bottom: 1px solid var(--highlight) !important;
  }

  html[data-theme="light"] body.aqua .section-block {
    background: var(--section-bg-top) !important;
    border-color: var(--section-border) !important;
    box-shadow: var(--page-box-shadow) !important;
  }

  html[data-theme="light"] body.aqua .section-block p,
  html[data-theme="light"] body.aqua .section-block li {
    text-shadow: 0 1px 3px rgba(0,0,0,0.10) !important;
  }

  html[data-theme="light"] body.aqua .image-block {
    border: 1px solid var(--section-border) !important;
    box-shadow: 0 0 18px rgba(245, 216, 175, 0.14) !important;
  }

  html[data-theme="light"] body.aqua .quiz-question,
  html[data-theme="light"] body.aqua .quiz-prompt {
    background: linear-gradient(to right, #fff4e6, #fdf0e0) !important;
    color: var(--text-accent) !important;
    border-left: 4px solid var(--glyph-color) !important;
    box-shadow: 0 0 14px rgba(245, 216, 175, 0.14) !important;
  }

  html[data-theme="light"] body.aqua .quiz-options {
    background: #f9e4ce !important;
    border: 1px solid var(--section-border) !important;
  }

  html[data-theme="light"] body.aqua .quiz-options button,
  html[data-theme="light"] body.aqua .quiz-button {
    background: #e8a76c !important;
    color: #fff8f0 !important;
    border: 2px solid var(--glyph-color) !important;
    box-shadow: 0 0 8px rgba(245, 216, 175, 0.18) inset !important;
  }

  html[data-theme="light"] body.aqua .quiz-options button:hover,
  html[data-theme="light"] body.aqua .quiz-button:hover {
    background: var(--highlight) !important;
    color: #241e18 !important;
    border-color: #f9e4ce !important;
    box-shadow: 0 0 14px var(--shadow-glow) !important;
  }

  /* Verify banner (both modes – uses updated tokens) */
  html[data-theme="light"] body.aqua #verify-banner,
  html[data-theme="dark"] body.aqua #verify-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--verify-banner-gap, 0.6rem);
    padding: var(--verify-banner-padding, 0.75rem 1rem);
    margin: var(--verify-banner-margin, 0 0 1rem 0);
    border-radius: var(--verify-banner-radius, 0.75rem);
    border: var(--verify-banner-border, 1px solid var(--section-border));
    background: var(--verify-banner-bg, var(--badge-bg));
    color: var(--verify-banner-text, var(--badge-text));
    box-shadow: var(--verify-banner-shadow, var(--badge-shadow));
    font-size: var(--verify-banner-font-size, 0.9rem);
    text-align: center;
    animation: fadeIn 0.4s ease-out forwards;
  }

  html[data-theme="light"] body.aqua #verify-banner button,
  html[data-theme="dark"] body.aqua #verify-banner button {
    background: var(--verify-btn-bg, var(--text-accent));
    color: var(--verify-btn-text, var(--bg-primary));
    border: var(--verify-btn-border, 1px solid var(--accent-page));
    border-radius: var(--verify-btn-radius, 0.5rem);
    padding: var(--verify-btn-padding, 0.35rem 0.75rem);
    cursor: pointer;
    font-weight: var(--verify-btn-weight, 500);
    transition: var(--verify-btn-transition, all 0.2s ease-in-out);
  }

  html[data-theme="light"] body.aqua #verify-banner button:hover,
  html[data-theme="dark"] body.aqua #verify-banner button:hover {
    background: var(--highlight);
    color: var(--text-primary);
    border-top-color: var(--strong-text);
    box-shadow: 0 0 12px var(--shadow-glow);
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  html[data-theme="light"] body.aqua {
    --hero-overlay-text: #f5d8af;
    --hero-overlay-subtext: color-mix(in srgb, #f5d8af 94%, transparent);
    --hero-overlay-rule: color-mix(in srgb, #f0c38f 78%, transparent);
    --hero-overlay-cta-text: #f5d8af;
    --hero-overlay-cta-border: color-mix(in srgb, #f0c38f 74%, transparent);
    --hero-overlay-cta-border-strong: color-mix(in srgb, #f0c38f 92%, transparent);
    --hero-overlay-cta-inner-border: color-mix(in srgb, #f5d8af 40%, transparent);
    --hero-overlay-cta-inner-shadow: inset 0 0 8px color-mix(in srgb, #f5d8af 10%, transparent);
    --hero-overlay-shadow-title: 0 2px 8px rgba(40, 28, 16, 0.42);
    --hero-overlay-shadow-copy: 0 2px 8px rgba(40, 28, 16, 0.34);
  }

  html[data-theme="dark"] body.aqua {
    --hero-overlay-text: #ffe9cc;
    --hero-overlay-subtext: color-mix(in srgb, #ffe9cc 94%, transparent);
    --hero-overlay-rule: color-mix(in srgb, #f5d8af 78%, transparent);
    --hero-overlay-cta-text: #ffe9cc;
    --hero-overlay-cta-border: color-mix(in srgb, #f5d8af 74%, transparent);
    --hero-overlay-cta-border-strong: color-mix(in srgb, #f5d8af 92%, transparent);
    --hero-overlay-cta-inner-border: color-mix(in srgb, #ffe9cc 40%, transparent);
    --hero-overlay-cta-inner-shadow: inset 0 0 8px color-mix(in srgb, #ffe9cc 10%, transparent);
    --hero-overlay-shadow-title: 0 2px 8px rgba(8, 6, 4, 0.44);
    --hero-overlay-shadow-copy: 0 2px 8px rgba(8, 6, 4, 0.36);
  }
}