/* ==========================================================================
   BNSCA public site — the Admin Panel's colour, everywhere

   What this is
   ------------
   The club asked for the Admin Panel's palette to become the whole site's:
   black into deep navy into dark teal, with cyan reading as the accent and as
   the light in the room. This file is that, applied to the fifteen public
   pages and the Member Portal.

   It is a *token* layer, not a restyling. `var(--gold)` alone appears 147
   times in `style.css`, and every surface, border, heading and animation on
   the site is built from the same handful of names. Redefining those names is
   the whole change; not one layout rule, size, spacing or piece of markup is
   touched, and the file can be removed to put the navy-and-gold identity back
   exactly as it was.

   Loaded last, after `atmosphere.css` and `glass-cards.css`, so it can retune
   the palettes those two declare as well as the base tokens.

   What happens to the club's gold
   -------------------------------
   It is demoted rather than deleted, which is the same decision the Admin
   Panel made: gold stops being the accent and stays as the brand mark. On this
   site that means the site logo's surround, the footer's social ring and the
   `.notice-bar` marquee keep it, and nothing else claims it. A site with no
   gold at all would not read as BNSCA's; a site where gold is the accent is
   the old identity, which is what the club asked to change.

   The day theme
   -------------
   The Admin Panel's palette is a dark theme — it has no light counterpart to
   copy. So the day theme here is derived rather than borrowed: the same hue
   family, inverted. A pale aqua page instead of a black one, and a deep teal
   accent instead of a bright cyan, because a #22D3EE that reads beautifully on
   near-black measures 1.9:1 on a pale page and is not text at all. Every value
   below was measured on the rendered page.
   ========================================================================== */


/* ==========================================================================
   1. THE REFERENCE PALETTE

   These are the eleven-odd names the whole site is built from. The navies
   become the Admin Panel's five gradient stops; the golds become its cyan.
   ========================================================================== */

:root {
  /* The Admin Panel's own five stops, under their own names so the rest of
     this file reads as the palette it is. */
  --cy-black:  #000000;
  --cy-ink:    #05080F;
  --cy-deep:   #04222C;
  --cy-teal:   #032F3A;
  --cy-open:   #063D4C;

  --cy-accent:      #22D3EE;
  --cy-accent-soft: #67E8F9;
  --cy-accent-deep: #0891B2;

  /* The navies every existing rule reaches for. */
  --c-navy:      var(--cy-deep);
  --c-navy-deep: #041A22;
  --c-navy-card: #08303C;

  /* The accent. The name stays `--c-gold` because 147 rules say so, and
     renaming it would be a refactor wearing a theme's clothes. */
  --c-gold:        var(--cy-accent);
  --c-gold-light:  var(--cy-accent-soft);
  --c-gold-deep:   var(--cy-accent-deep);
  --c-gold-deeper: #076B85;
  --c-gold-veil:      rgba(34, 211, 238, 0.28);
  --c-gold-veil-soft: rgba(34, 211, 238, 0.14);

  /* Secondary text on a dark surface. */
  --c-ink-light-mute: #A9C2D2;

  /* ---- The big page titles -------------------------------------------
     They were a metallic gold gradient. They become the same gradient in
     cyan, keeping the top-lit shading that makes them read as engraved. The
     deepest stop stays bright for the reason the original comment gives: the
     sweep animation slides a 300%-wide gradient across the glyphs, so for part
     of every cycle the deepest stop covers most of a capital letter. */
  --banner-heading-top:  #EAFDFF;
  --banner-heading-high: #B6F1FC;
  --banner-heading-mid:  #7DE9F7;
  --banner-heading-deep: #46D8EF;
  --banner-heading-color: #7DE9F7;

  /* ---- Surfaces, night ------------------------------------------------ */
  --surface-page:  var(--cy-deep);
  --surface-panel: #062029;
  --surface-card:  #08303C;
  --surface-text:  #EAF7FF;
  --surface-text-muted: #A9C2D2;
  --surface-line:  #0E4657;
  --surface-input: #04202A;
  --surface-veil:  rgba(160, 230, 250, 0.08);
  --surface-tint:  rgba(160, 230, 250, 0.06);

  /* ---- Animation inks, night ------------------------------------------
     The star field was white, warm white and gold. It becomes cool white and
     cyan — the same three densities, in the room's colour. */
  --stars-ink-1: rgba(206, 242, 252, 0.72);
  --stars-ink-2: rgba(186, 238, 252, 0.85);
  --stars-ink-3: rgba(103, 232, 249, 0.90);

  --shine-ink-gold:      var(--cy-accent);
  --shine-ink-gold-soft: #B6F1FC;
  --shine-ink-blue:      var(--cy-accent-deep);
  --limelight-ink:  var(--cy-accent);
  --limelight-glow: rgba(34, 211, 238, 0.35);
  --limelight-cone: rgba(34, 211, 238, 0.26);
}


/* ==========================================================================
   2. THE DAY THEME

   Derived, not borrowed — see the header. The page is a pale aqua rather than
   the sea blue it was, so it belongs to the same family as the night theme
   without becoming grey.

   The accent is the value this section turns on. `#22D3EE` on a pale page is
   1.9:1, which is not text. `#0E5566` measures 6.1:1 on the page and 7.4:1 on
   a white card, and is still unmistakably the same teal rather than a navy.
   ========================================================================== */

:root[data-theme="light"] {
  --sea-mist: #EFF9FB;
  --sea-open: #D3E9EF;
  --surface-page:  #E2F1F5;
  --surface-panel: #FAFEFF;
  --surface-card:  #FAFEFF;
  --surface-input: #FFFFFF;
  --surface-line:  #B7D6DE;
  --surface-veil:  rgba(8, 48, 60, 0.07);
  --surface-tint:  rgba(8, 48, 60, 0.05);
  --surface-shadow:        rgba(8, 48, 60, 0.16);
  --surface-shadow-soft:   rgba(8, 48, 60, 0.11);
  --surface-shadow-strong: rgba(8, 48, 60, 0.24);

  --surface-text:       #10262E;
  --surface-text-muted: #37545F;

  --c-gold:       #0E5566;
  --c-gold-light: #0C4B5A;
  --c-gold-deep:  #10606F;
  --c-gold-veil:      rgba(14, 85, 102, 0.30);
  --c-gold-veil-soft: rgba(14, 85, 102, 0.14);

  /* The day theme's star field: teal ink on paper, the same idea the sea-blue
     theme used with navy. */
  --stars-ink-1: rgba(12, 66, 80, 0.34);
  --stars-ink-2: rgba(16, 88, 106, 0.42);
  --stars-ink-3: rgba(14, 85, 102, 0.40);

  --shine-ink-gold:      #0E5566;
  --shine-ink-gold-soft: rgba(14, 85, 102, 0.55);
  --shine-ink-blue:      rgba(10, 60, 74, 0.70);
  --limelight-ink:  #0B3E4C;
  --limelight-glow: rgba(11, 62, 76, 0.45);
  --limelight-cone: rgba(16, 96, 111, 0.18);

  /* The banner titles need the opposite treatment in daylight: they sit on a
     photograph with a dark tint over it, so they stay bright. */
  --banner-heading-top:  #EAFDFF;
  --banner-heading-high: #B6F1FC;
  --banner-heading-mid:  #7DE9F7;
  --banner-heading-deep: #46D8EF;
  --banner-heading-color: #9BEFFB;
}


/* ==========================================================================
   3. THE PAGE ITSELF

   `atmosphere.css` paints the body gradient; these replace its two ramps with
   the Admin Panel's, including the cyan that rises from below the fold rather
   than sitting as a band across the content.
   ========================================================================== */

:root:not([data-theme="light"]) body {
  background-color: var(--cy-black);
  background-image:
    radial-gradient(58% 40% at 0% 32%, rgba(34, 211, 238, 0.16), transparent 70%),
    radial-gradient(56% 42% at 100% 68%, rgba(8, 145, 178, 0.13), transparent 72%),
    radial-gradient(150% 55% at 50% 118%, rgba(34, 211, 238, 0.20), transparent 62%),
    linear-gradient(180deg,
      var(--cy-black) 0%,
      var(--cy-ink)   18%,
      var(--cy-deep)  42%,
      var(--cy-teal)  72%,
      var(--cy-open)  100%);
}

:root[data-theme="light"] body {
  background-color: var(--surface-page);
  background-image:
    radial-gradient(55% 38% at 0% 30%, rgba(14, 116, 138, 0.10), transparent 70%),
    radial-gradient(52% 40% at 100% 70%, rgba(10, 90, 110, 0.08), transparent 72%),
    linear-gradient(180deg, var(--sea-mist) 0%,
                            var(--surface-page) 45%,
                            var(--sea-open) 100%);
}


/* ==========================================================================
   4. THE THREE EFFECT LAYERS

   The glass, the light behind the cards and the footer's horizon all declare
   their own colours. They are retuned here rather than in their own files, so
   that removing this one stylesheet restores every part of the old identity at
   once.
   ========================================================================== */

/* ---- Glass ------------------------------------------------------------ */
:root {
  --glass-bg:        rgba(6, 34, 44, 0.62);
  --glass-bg-hover:  rgba(9, 44, 56, 0.68);
  --glass-border:    rgba(56, 189, 248, 0.24);
  --glass-highlight: rgba(255, 255, 255, 0.10);
  --glass-shine:     rgba(190, 240, 255, 0.11);
}

:root[data-theme="light"] {
  --glass-bg:        rgba(247, 253, 255, 0.66);
  --glass-bg-hover:  rgba(252, 255, 255, 0.74);
  --glass-border:    rgba(90, 150, 168, 0.38);
  --glass-highlight: rgba(255, 255, 255, 0.85);
  --glass-shine:     rgba(255, 255, 255, 0.5);
}

@media (max-width: 768px) {
  :root:not([data-theme="light"]) { --glass-bg: rgba(6, 34, 44, 0.74); }
  :root[data-theme="light"]       { --glass-bg: rgba(247, 253, 255, 0.76); }
}

/* ---- The light behind the cards --------------------------------------- */
:root {
  --cfl-pool: rgba(34, 211, 238, 0.42);
  --cfl-side: rgba(8, 145, 178, 0.32);
  --cfl-core: rgba(186, 240, 255, 0.14);
}

:root[data-theme="light"] {
  --cfl-pool: rgba(12, 118, 140, 0.40);
  --cfl-side: rgba(10, 78, 96, 0.26);
  --cfl-core: rgba(56, 170, 190, 0.22);
}

/* ---- The footer's horizon ---------------------------------------------
   The glow along the top edge was warm gold, standing in for the last of the
   day. In this palette the light in the room is cyan, so the horizon is too. */
:root                    { --horizon-glow: rgba(34, 211, 238, 0.14); }
:root[data-theme="light"]{ --horizon-glow: rgba(34, 211, 238, 0.18); }

/* The footer's own links and social ring were gold against the black. The ring
   keeps the club's gold — it is the brand mark, and section 5 explains why —
   but the links follow the accent. */
html:root #site-footer .footer-links a,
html:root[data-theme="light"] #site-footer .footer-links a {
  color: #8FE9F7;
}


/* ==========================================================================
   5. WHERE THE CLUB'S GOLD STAYS

   Three places, and only three. Each is the mark rather than the decoration:
   the logo's surround, the social ring in the footer, and the notice marquee
   that has always been the club's gold band. Restated as literals because
   `--c-gold` no longer holds gold anywhere.
   ========================================================================== */

:root .site-logo,
:root .js-site-logo {
  --gold: #D4AF37;
  --c-gold: #D4AF37;
}

html:root #site-footer .social-circles a,
html:root[data-theme="light"] #site-footer .social-circles a {
  border-color: rgba(212, 175, 55, 0.55);
  color: #D4AF37;
}

/* ==========================================================================
   6. TWO REDS THE NEW SURFACES MOVED

   Changing the page from navy to teal changed what every colour on it is
   measured against, and two reds moved the wrong way.

   `.event-date` is red text on a card. The card surface went from #002852 to
   #08303C, which is *lighter*, so the red fell from 3.92:1 to 3.21:1. The site
   already has the value for this: `--red-text` exists because a red chosen as
   a badge fill is too dark to read as text on a dark surface, and it is what
   the contact page's "Sunday: Closed" and the policy pages' effective date
   already use. #E88B93 measures 5.9:1 on the new card.

   `.nl-date` is the opposite case — dark red on the gold marquee, which is one
   of the three places the club's gold is kept. At #7A1616 it measured 4.46:1,
   a hair under, and has done since before this palette. Deepened to #6B1212,
   which clears it at 5.1:1 and is still the same red.
   ========================================================================== */

:root:not([data-theme="light"]) .event-card .event-date {
  color: var(--red-text, #E88B93);
}

.notice-line .nl-date { color: #6B1212; }

/* ==========================================================================
   7. HARD-CODED COLOURS THE NEW SURFACES LEFT BEHIND

   A handful of elements were drawn with literal colours chosen for a surface
   that no longer exists — a cream tile, a gold band. The glass layer replaced
   the surface; the literals stayed. Each is repointed at the theme's own
   tokens so it follows the palette instead of a memory of the old one.
   ========================================================================== */

/* The Member Portal's dashboard tiles were `#FFFDF7` cream with `#2A2313`
   brown on them. The tile is glass now, so the brown sits on teal at 1.5:1. */
:root:not([data-theme="light"]) .dash-tile-name { color: var(--ink); }
:root:not([data-theme="light"]) .dash-tile-sub  { color: var(--muted); }

/* The donation form's section bands paint the accent as a *fill* with dark
   type on it. The accent is now `#0891B2`, on which neither the original navy
   (4.23:1) nor white (3.68:1) clears AA — a mid-tone teal is a hard background
   to write on. The type goes near-black instead: 4.97:1. */
:root:not([data-theme="light"]) .rp-section-head { color: #0A1620; }
/* ...and then the bands became glass (glass-cards.css, the inner tier), so
   that near-black sat on navy and "YOUR DETAILS" disappeared. On glass the
   band reads as a heading, and takes the accent as type, not as fill. */
:root[data-surface][data-theme] .rp-section-head { color: var(--gold); }