/* ==========================================================================
   table.center tokens: Table Glass (Brand Style Guide v2.1, section 10)

   Every color, glass, glow, shadow, radius, and motion value the app uses
   lives here. styles.css and the page <style> blocks use these names only.
   Load order on every page: /tokens.css, then /styles.css.

   Color rule (guide 10): palette colors only. Translucency is a palette
   color at lower opacity. A few solid values are composites (a palette color
   laid over Near-Black at a stated opacity); each one is labeled, and the
   contrast test recomputes it from the palette. Shadows may also use black
   at low opacity, which darkens without adding a hue.
   ========================================================================== */

/* ---- Palette (guide 03–04) and the composites built from it ------------- */
:root {
  --periwinkle:  #6068B2;  /* Core, PMS 2116 C */
  --mint:        #A5DFD3;  /* Core, PMS 572 C */
  --lavender:    #DDE5ED;  /* Core, Lavender Mist, PMS 656 C */
  --charcoal:    #4B4F54;  /* Core, PMS 7540 C */
  --white:       #FFFFFF;
  --spring-mint: #7AE1BF;  /* Playful, PMS 3375 C */
  --near-black:  #252A36;  /* Playful, PMS 4280 C */
  --sunshine:    #FFBF3F;  /* Playful, PMS 136 C */
  --coral:       #FF8674;  /* Playful, PMS 170 C */
  --deep-indigo: #343579;  /* Formal, PMS 2118 C */
  --sage:        #9ABEAA;  /* Formal, PMS 6176 C */
  --cream:       #F4F1EA;  /* Formal, paper stock */
  --slate:       #3B3B46;  /* Formal, PMS 4133 C */
  --flame:       #D64545;  /* Seasonal, Pentecost */
  --grape:       #39207C;  /* Formal */
  --muted-gold:  #AF9335;  /* Formal, PMS 4021 C: ceremony only */
  --lent-violet: #5A4E7C;  /* Seasonal, Lent */
  --easter-gold: #E6B84A;  /* Seasonal, Easter (also Christmas on screens) */

  /* Composites over Near-Black (dark theme) */
  --nb-white-06: #323742;  /* White 6% over Near-Black: dark surface */
  --nb-white-14: #444852;  /* White 14% over Near-Black: dark raised surface */
  --nb-lav-70:   #A6ADB6;  /* Lavender Mist 70% over Near-Black: secondary text */

  /* Channels for translucency: rgba(var(--rgb-x), alpha) */
  --rgb-periwinkle:  96, 104, 178;
  --rgb-spring-mint: 122, 225, 191;
  --rgb-deep-indigo: 52, 53, 121;
  --rgb-lavender:    221, 229, 237;
  --rgb-sunshine:    255, 191, 63;
  --rgb-flame:       214, 69, 69;
  --rgb-lent-violet: 90, 78, 124;
  --rgb-easter-gold: 230, 184, 74;
  --rgb-near-black:  37, 42, 54;
  --rgb-white:       255, 255, 255;
  --rgb-nb-white-06: 50, 55, 66;  /* the dark surface composite */
  --rgb-shade:       0, 0, 0;     /* shadows only */

  /* Type, shape, motion (unchanged from styles.css v30) */
  --font-heading: 'Bebas Neue Pro', 'Bebas Neue', Impact, sans-serif;
  --font-body: 'Equity', Georgia, 'Times New Roman', serif;
  --radius: 12px;
  --radius-sm: 8px;
  --transition: 0.2s ease;
  --transition-spring: 0.35s cubic-bezier(0.22, 1.2, 0.36, 1);
  --glass-blur: blur(14px) saturate(140%);
  --glass-blur-sm: blur(10px);
}

/* ---- Dark: the default, and Sundays from 10 a.m. to noon ----------------- */
:root {
  --color-primary: var(--deep-indigo);
  --color-primary-light: var(--periwinkle);
  --color-accent: var(--spring-mint);
  --color-accent-dark: var(--sage);           /* where primary buttons fade to */
  --color-on-accent: var(--near-black);       /* text on accent fills: 9.1:1, 7.1:1 on Sage */
  --color-accent-text: var(--spring-mint);    /* accent as words (labels, links); --color-accent is for fills, borders, icons */
  --rgb-accent: var(--rgb-spring-mint);
  --btn-from: var(--color-accent);            /* primary button fill; seasons may set it apart from the accent */
  --btn-to: var(--color-accent-dark);
  --btn-text: var(--color-on-accent);
  --color-background: var(--near-black);
  --color-surface: var(--nb-white-06);
  --color-surface-light: var(--nb-white-14);
  --color-text: var(--white);
  --color-text-muted: var(--nb-lav-70);
  --color-text-dim: var(--nb-lav-70);         /* one secondary level: 60% fails on glass */
  --color-soft-gray: var(--lavender);
  --color-error: var(--coral);                /* field borders and icons */
  --color-error-text: var(--white);           /* Coral words drop to 4.4:1 on the bare ground under a glow */
  --color-error-on: var(--near-black);        /* glyph on an error-colored dot */
  --color-success: var(--spring-mint);

  --glass-surface: rgba(var(--rgb-nb-white-06), 0.5);
  --glass-border: rgba(var(--rgb-white), 0.08);
  --glass-border-strong: rgba(var(--rgb-white), 0.14);
  --stripe: rgba(var(--rgb-white), 0.02);
  --spinner-track: rgba(var(--rgb-white), 0.15);

  --aurora-a: rgba(var(--rgb-periwinkle), 0.32);
  --aurora-b: rgba(var(--rgb-spring-mint), 0.14);
  --headline-from: var(--white);              /* welcome headline: White to accent */
  --color-logo: var(--white);                 /* the White lockup */
  --confetti: var(--spring-mint) var(--mint) var(--periwinkle) var(--lavender) var(--white);

  --accent-wash: rgba(var(--rgb-accent), 0.08);
  --accent-wash-strong: rgba(var(--rgb-accent), 0.12);
  --accent-highlight: rgba(var(--rgb-accent), 0.18);    /* 0.22 put Spring Mint answers at 4.3:1 */
  --accent-highlight-flash: rgba(var(--rgb-accent), 0.35);
  --peri-wash: rgba(var(--rgb-periwinkle), 0.12);
  --peri-line: rgba(var(--rgb-periwinkle), 0.45);
  --hover-border: rgba(var(--rgb-periwinkle), 0.7);
  --hover-wash: rgba(var(--rgb-deep-indigo), 0.18);

  --shadow-hover: 0 8px 28px rgba(var(--rgb-deep-indigo), 0.25);
  --shadow-lift: 0 8px 28px rgba(var(--rgb-shade), 0.35);
  --shadow-float: 0 4px 24px rgba(var(--rgb-shade), 0.4);
  --btn-glow: 0 4px 20px rgba(var(--rgb-accent), 0.18);
  --btn-glow-hover: 0 6px 28px rgba(var(--rgb-accent), 0.32);
  --btn-glow-peak: 0 4px 36px rgba(var(--rgb-accent), 0.42);
  --spinner-on-accent-track: rgba(var(--rgb-shade), 0.2);
}

/* ---- Light: Cream ground --------------------------------------------------- */
:root[data-theme="light"] {
  --color-accent: var(--periwinkle);
  --color-accent-dark: var(--deep-indigo);
  --color-on-accent: var(--white);            /* 5.1:1 on Periwinkle, 10.9:1 on Deep Indigo */
  --color-accent-text: var(--deep-indigo);    /* Periwinkle text fails on bare Cream under the glow (3.85:1) */
  --rgb-accent: var(--rgb-periwinkle);
  --color-background: var(--cream);
  --color-surface: var(--white);
  --color-surface-light: var(--lavender);
  --color-text: var(--near-black);
  --color-text-muted: var(--charcoal);
  --color-text-dim: var(--charcoal);
  --color-soft-gray: var(--slate);
  --color-error: var(--flame);                /* borders and icons: 3.9:1 on Cream */
  --color-error-text: var(--near-black);      /* Coral and Flame both fail as light-ground text */
  --color-error-on: var(--white);
  --color-success: var(--periwinkle);

  --glass-surface: rgba(var(--rgb-white), 0.65);
  --glass-border: rgba(var(--rgb-near-black), 0.10);
  --glass-border-strong: rgba(var(--rgb-near-black), 0.18);
  --stripe: rgba(var(--rgb-near-black), 0.03);
  --spinner-track: rgba(var(--rgb-near-black), 0.15);

  --color-logo: var(--periwinkle);            /* the Periwinkle lockup */
  --confetti: var(--spring-mint) var(--mint) var(--periwinkle) var(--deep-indigo) var(--sage);  /* White and Lavender vanish on Cream */

  --aurora-a: rgba(var(--rgb-periwinkle), 0.13);
  --aurora-b: rgba(var(--rgb-spring-mint), 0.12);

  /* Guide 10: Deep Indigo under primary buttons on light, Spring Mint glow on dark. */
  --btn-glow: 0 4px 20px rgba(var(--rgb-deep-indigo), 0.22);
  --btn-glow-hover: 0 6px 28px rgba(var(--rgb-deep-indigo), 0.3);
  --btn-glow-peak: 0 4px 36px rgba(var(--rgb-deep-indigo), 0.38);
}

/* ==========================================================================
   Liturgical seasons (guide 04 and 10). js/season.js sets data-season on
   <html> from the date in Washington, before paint; Ordinary Time has no
   attribute and uses the core values above, whose Spring Mint and Sage are
   the season's green. Each season changes the glow, the confetti, and the
   accent where the season color passes contrast in that mode. Neutrals,
   type, logo, and error colors never change.

   Where the season color can't carry buttons or words in a mode, the glow
   carries the season and the accent comes from the palette instead:
   Deep Indigo and Lent Violet measure 1.3:1 and 1.9:1 on Near-Black, and
   Easter Gold and Flame measure 1.6:1 and 3.9:1 on Cream.
   ========================================================================== */

/* ---- Advent: first Sunday of Advent through Dec. 24. Watchful blue-violet. */
:root:not([data-theme="light"])[data-season="advent"] {
  --color-accent: var(--lavender);
  --color-accent-dark: var(--nb-lav-70);
  --color-accent-text: var(--lavender);
  --rgb-accent: var(--rgb-lavender);
  --aurora-a: rgba(var(--rgb-periwinkle), 0.30);
  --aurora-b: rgba(var(--rgb-deep-indigo), 0.50);   /* the green glow gives way to indigo */
  --confetti: var(--lavender) var(--periwinkle) var(--white) var(--mint);
}
:root[data-theme="light"][data-season="advent"] {
  --color-accent: var(--deep-indigo);
  --color-accent-dark: var(--grape);
  --color-accent-text: var(--deep-indigo);
  --rgb-accent: var(--rgb-deep-indigo);
  --aurora-a: rgba(var(--rgb-deep-indigo), 0.14);
  --aurora-b: rgba(var(--rgb-periwinkle), 0.12);
  --confetti: var(--deep-indigo) var(--periwinkle) var(--grape) var(--sage);
}

/* ---- Christmas: Dec. 25 through Epiphany, Jan. 6. White and gold. ------- */
:root:not([data-theme="light"])[data-season="christmas"] {
  --color-accent: var(--easter-gold);
  --accent-highlight: rgba(var(--rgb-accent), 0.12);  /* 0.18 puts gold answers at 4.2:1 */
  --color-accent-dark: var(--muted-gold);
  --color-accent-text: var(--easter-gold);
  --rgb-accent: var(--rgb-easter-gold);
  --aurora-a: rgba(var(--rgb-periwinkle), 0.28);
  --aurora-b: rgba(var(--rgb-easter-gold), 0.12);
  --confetti: var(--easter-gold) var(--sunshine) var(--white) var(--lavender);
}
:root[data-theme="light"][data-season="christmas"] {
  --btn-from: var(--easter-gold);             /* gold can fill buttons with Near-Black words, but not carry icons or words on Cream */
  --btn-to: var(--muted-gold);
  --btn-text: var(--near-black);
  --btn-glow: 0 4px 20px rgba(var(--rgb-easter-gold), 0.35);
  --btn-glow-hover: 0 6px 28px rgba(var(--rgb-easter-gold), 0.45);
  --btn-glow-peak: 0 4px 36px rgba(var(--rgb-easter-gold), 0.55);
  --aurora-a: rgba(var(--rgb-periwinkle), 0.12);
  --aurora-b: rgba(var(--rgb-easter-gold), 0.16);
  --confetti: var(--muted-gold) var(--periwinkle) var(--deep-indigo) var(--sage);
}

/* ---- Lent: Ash Wednesday through Holy Saturday. Ashen purple. ----------- */
:root:not([data-theme="light"])[data-season="lent"] {
  --color-accent: var(--nb-lav-70);           /* ashes: icons, borders, and buttons lose their color */
  --color-accent-dark: var(--nb-lav-70);
  --color-accent-text: var(--lavender);
  --rgb-accent: var(--rgb-lavender);
  --aurora-a: rgba(var(--rgb-lent-violet), 0.50);
  --aurora-b: rgba(var(--rgb-deep-indigo), 0.40);
  --confetti: var(--lavender) var(--nb-lav-70) var(--white);
}
:root[data-theme="light"][data-season="lent"] {
  --color-accent: var(--lent-violet);
  --color-accent-dark: var(--deep-indigo);
  --color-accent-text: var(--lent-violet);
  --rgb-accent: var(--rgb-lent-violet);
  --aurora-a: rgba(var(--rgb-lent-violet), 0.14);
  --aurora-b: rgba(var(--rgb-deep-indigo), 0.10);
  --confetti: var(--lent-violet) var(--deep-indigo) var(--charcoal);
}

/* ---- Easter: Easter Sunday through the Saturday before Pentecost.
        Gold, Mint, and White. -------------------------------------------- */
:root:not([data-theme="light"])[data-season="easter"] {
  --color-accent: var(--easter-gold);
  --accent-highlight: rgba(var(--rgb-accent), 0.12);  /* 0.18 puts gold answers at 4.2:1 */
  --color-accent-dark: var(--muted-gold);
  --color-accent-text: var(--easter-gold);
  --rgb-accent: var(--rgb-easter-gold);
  --aurora-a: rgba(var(--rgb-easter-gold), 0.14);
  --aurora-b: rgba(var(--rgb-spring-mint), 0.14);
  --confetti: var(--easter-gold) var(--sunshine) var(--spring-mint) var(--mint) var(--white);
}
:root[data-theme="light"][data-season="easter"] {
  --btn-from: var(--easter-gold);
  --btn-to: var(--muted-gold);
  --btn-text: var(--near-black);
  --btn-glow: 0 4px 20px rgba(var(--rgb-easter-gold), 0.35);
  --btn-glow-hover: 0 6px 28px rgba(var(--rgb-easter-gold), 0.45);
  --btn-glow-peak: 0 4px 36px rgba(var(--rgb-easter-gold), 0.55);
  --aurora-a: rgba(var(--rgb-easter-gold), 0.18);
  --aurora-b: rgba(var(--rgb-spring-mint), 0.12);
  --confetti: var(--muted-gold) var(--spring-mint) var(--periwinkle) var(--sage);
}

/* ---- Pentecost Sunday. Fire. --------------------------------------------- */
:root:not([data-theme="light"])[data-season="pentecost"] {
  --color-accent: var(--sunshine);
  --color-accent-dark: var(--coral);
  --color-accent-text: var(--sunshine);
  --rgb-accent: var(--rgb-sunshine);
  --aurora-a: rgba(var(--rgb-flame), 0.30);
  --aurora-b: rgba(var(--rgb-sunshine), 0.12);
  --confetti: var(--flame) var(--sunshine) var(--coral) var(--white);
}
:root[data-theme="light"][data-season="pentecost"] {
  --btn-from: var(--sunshine);                /* Flame can't carry White words (4.4:1); Sunshine to Coral with Near-Black can */
  --btn-to: var(--coral);
  --btn-text: var(--near-black);
  --btn-glow: 0 4px 20px rgba(var(--rgb-flame), 0.28);
  --btn-glow-hover: 0 6px 28px rgba(var(--rgb-flame), 0.36);
  --btn-glow-peak: 0 4px 36px rgba(var(--rgb-flame), 0.44);
  --aurora-a: rgba(var(--rgb-flame), 0.12);
  --aurora-b: rgba(var(--rgb-sunshine), 0.16);
  --confetti: var(--flame) var(--sunshine) var(--coral) var(--deep-indigo);
}