/* FanPulse design tokens — from FanPulse_Brand_Guidelines */

:root {
  /* ─────── Color: surfaces (UI System 2.0) ─────── */
  --c-bg:         #081220;   /* Navy — app background */
  --c-bg-2:       #0B1220;   /* Deep Field — alt background */
  --c-surface:    #111A2A;   /* Panel — cards, panels */
  --c-surface-2:  #18243A;   /* Slightly raised surface */
  --c-border:     #263147;   /* Border Steel */
  --c-border-2:   #1A2336;   /* Subtle border */
  --c-feed-bg:    #F6F8FB;   /* Light feed canvas (Comfortable / light) */

  /* ─────── App wall: angled gradient over leather texture ───────
     Consumed by .bg-grid in base.css and by the legacy Sngine shell
     in fanpulse-sngine.css, so both shells stay in sync from here.

     IMPORTANT — do not swap in the original dark-leather.png here. That file is
     a near-transparent grain overlay (avg alpha 69/255, zero fully-opaque
     pixels); composited against this dark palette it measures ~2 levels of
     luminance variation, i.e. invisible. leather-tile.png is baked from it:
     the grain flattened over white (recovering its real 129-249 range) and
     remapped onto an opaque 14-128 dark ramp, with cross-faded edges so
     `repeat` has no seam.

     The tile is the BOTTOM layer (opaque) and the gradient tints it from on
     top. Gradient alpha is the visibility knob: ~0.50 measures ~6.3 stddev of
     grain, which reads clearly. Raising it toward 0.85 flattens the leather
     back out to nothing. */
  --c-bg-angle:        128deg;
  --c-bg-a:            rgba(17, 56, 72, 0.50);   /* gradient start — lit corner */
  --c-bg-b:            rgba(11, 38, 52, 0.54);   /* midpoint */
  --c-bg-c:            rgba(7, 23, 34, 0.60);    /* gradient end — shadowed corner */
  --c-bg-texture:      url('../img/leather-tile.webp');   /* 14 KB; the 209 KB PNG source sits next to it */
  --c-bg-texture-size: 420px;

  /* Scrim: a neutral darkener for edge fades and overlays. Deliberately NOT a
     background colour — anything that fades to --c-feed-bg (a light value)
     paints a white smear on the dark app. Mix this with transparent instead. */
  --c-scrim:      #000000;

  /* ─────── Color: brand accents (2.0) ─────── */
  --c-lime:       #C6FF00;   /* FanPulse Lime — primary CTA, wins */
  --c-lime-glow:  rgba(198, 255, 0, 0.18);
  --c-purple:     #A020F0;   /* Electric Purple — pulse, decorative */
  --c-purple-glow: rgba(108, 59, 255, 0.22);
  --c-violet:     #6C3BFF;   /* Pulse Violet — active nav, premium */
  --c-violet-soft: rgba(108, 59, 255, 0.16);  /* nav hover tint */
  --c-red:        #FF2D55;   /* Live Red — live, lose, alerts */
  --c-gold:       #FFC83D;   /* Gold Win — trophy, streak */
  --c-blue:       #3D7CFF;   /* Field Blue — balls, neutral sport data (V5 game page) */

  /* ─────── Color: text (2.0) ─────── */
  --c-text:       #FFFFFF;   /* Primary text */
  --c-text-2:     #B6C0D6;   /* Secondary text */
  --c-muted:      #8F9AAD;   /* Muted gray — tertiary */
  --c-dim:        #5A6477;   /* Disabled / placeholder */

  /* ─────── Typography ─────── */
  --font-display: 'Barlow Condensed', 'Oswald', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  --fs-xs:    11px;
  --fs-sm:    13px;
  --fs-base:  15px;
  --fs-md:    16px;
  --fs-lg:    18px;
  --fs-xl:    22px;
  --fs-2xl:   28px;
  --fs-3xl:   36px;
  --fs-4xl:   48px;
  --fs-5xl:   64px;

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-base:  1.5;
  --lh-loose: 1.75;

  /* ─────── Spacing ─────── */
  --sp-0:  0px;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* ─────── Radii ─────── */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   18px;
  --r-2xl:  24px;
  --r-pill: 999px;

  /* ─────── Shadows / glow ─────── */
  --sh-card:  0 2px 12px rgba(0, 0, 0, 0.35);
  --sh-lime:  0 0 24px var(--c-lime-glow);
  --sh-purple: 0 0 32px var(--c-purple-glow);

  /* ─────── Layout ─────── */
  --shell-max:       1440px;
  --left-nav-w:      240px;
  --right-rail-w:    320px;
  --header-h:        56px;
  --mobile-header-h: 56px;
  --mobile-bottom-h: 72px;
  --gutter:          16px;
  --gutter-lg:       24px;

  /* Overlay offsets. fp-player.js and fp-coverage.js position the persistent
     player, the floating video tile and the pinned chat against these. They were
     being consumed with a hard-coded 64px fallback that no rule ever defined, so
     the fallback always won — 8px short of the real bottom nav and blind to the
     safe-area inset, which let the player bar sit under the nav on notched
     phones. Defined here so every existing var() consumer picks up the truth.
       --fp-bottom-nav : bottom nav height + iOS safe area. 0 on desktop, where
                         .bottom-nav is display:none (it appears only ≤880px).
       --fp-player-h   : height reserved by the persistent player bar. */
  --fp-bottom-nav:   0px;
  --fp-player-h:     104px;

  /* ─────── Lower-third scoreboard (fp-scoreboard.css, game.php) ───────
     The broadcast board from "new scoreboard/fanspulse-lower-third.html":
     a brushed-metal bezel around a dark board. Team colours arrive per board
     as the inline --c custom property. */
  --sb-bezel-1:     #dfe4e9;
  --sb-bezel-2:     #747d86;
  --sb-bezel-3:     #2a3139;
  --sb-bezel-4:     #5c656e;
  --sb-bezel-5:     #c9d0d7;
  --sb-board-top:   #1d232a;
  --sb-board-bot:   #0e1216;
  --sb-cell-top:    #171c22;
  --sb-cell-bot:    #0b0e12;
  --sb-center-top:  #1b2129;
  --sb-center-bot:  #0f1319;
  --sb-pill:        #0d1014;
  --sb-pill-ink:    #e3e8ed;
  --sb-ink:         #ffffff;
  --sb-ink-2:       #d6dde4;
  --sb-ink-3:       #c8d0d8;
  --sb-rule:        #3a434d;
  --sb-box-line:    #cfd6dd;
  --sb-warn:        #f3b43a;
  --sb-black:       #000000;

  /* ─────── Z-stack ─────── */
  --z-base:    1;
  --z-card:    10;
  --z-sticky:  50;
  --z-header:  100;
  --z-modal:   200;
  --z-toast:   300;
}

/* ══════════════════════════════════════════════════════════════════════════
   FanPulse UI System 3.0 — deep-navy "--fp-*" layer   (W1.5 Visual/tokens)
   ─────────────────────────────────────────────────────────────────────────
   Single source of truth for the Communities & Audio Rooms visual language,
   taken from the confirmed style guide (Phase 2 Rollout / design backgrounds.png).
   The legacy --c-* tokens above are re-pointed at these below, so all 142
   existing --c-* usages inherit the new palette with zero feature edits.

   Accent hex were SAMPLED pixel-for-pixel from the confirmed mockups
   (Audio Rooms.png, Alerts and My Schedule.png). Sampled values are noted per
   token; they are treated as final for this layer pending a design sign-off.

   This is the ONLY file in wireframe/assets/css allowed to hold raw color
   literals — console/tests/test_color_audit.php enforces that on every other
   design-system stylesheet.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* ─────── Surfaces (style guide: CORE DARK COLORS) ─────── */
  --fp-bg-deep:        #020814;   /* Deepest Navy — page background            */
  --fp-surface-base:   #031321;   /* Dark Navy — surface base / app canvas     */
  --fp-surface-panel:  #07243B;   /* Primary Navy — panels & sections (cards)  */
  --fp-surface-raised: #0A2E49;   /* Secondary Navy — elevated / hover / modal */
  --fp-border:         #102D44;   /* Tertiary Navy — borders & dividers        */
  --fp-border-soft:    #0A2436;   /* subtle hairline (between base and border) */
  --fp-black:          #000000;   /* Pure Black — overlay & depth              */

  /* ─────── Signature gradients (style guide: GRADIENTS) ─────── */
  --fp-grad-page:  linear-gradient(180deg, #020814 0%, #031321 55%, #07243B 100%);
  --fp-grad-hero:  linear-gradient(180deg, #000000 0%, #031321 50%, #0A2E49 100%);
  --fp-grad-audio: linear-gradient(135deg, #031321 0%, #07243B 55%, #0A2E49 100%);

  /* ─────── Accents (SAMPLED from mockups — see notes) ─────── */
  /* lime primary CTA / wins. sampled #C1F502–#C6FF00 across Go PRO / Join      */
  --fp-lime:        #C6FF00;
  --fp-lime-ink:    #04140A;   /* text ON lime — near-black, ~16:1 on lime      */
  --fp-lime-glow:   rgba(198, 255, 0, 0.18);
  /* violet — creator / money / premium. CTA gradient sampled #5513BA→#733DCA   */
  --fp-violet:      #6C3BFF;   /* brand Pulse Violet (mockup light stop ~#733DCA)*/
  --fp-violet-deep: #5513BA;   /* mockup deep stop — for creator/money gradient  */
  --fp-violet-soft: rgba(108, 59, 255, 0.16);
  --fp-violet-text: #A98BFF;   /* violet as TEXT on navy (affiliate links, "Change ZIP"), ~7:1 */
  --fp-grad-violet: linear-gradient(135deg, #6C3BFF 0%, #5513BA 100%);
  /* live red — live/lose/alerts. sampled #E82F48 (notif) / #F24B5A (badge)     */
  --fp-red:         #FF2D55;
  --fp-red-glow:    rgba(255, 45, 85, 0.20);
  /* gold — trophy / streak / win. brand #FFC83D (mockup amber dot ~#F5A506)    */
  --fp-gold:        #FFC83D;
  /* flame — "hot" / trending. sampled #D2391F base → #DE5020 tip               */
  --fp-flame:       #F0531C;

  /* ─────── Volt — the immersive feed + takes accent ───────
     PROMOTED HERE 2026-09-06. These lived only in feed-v2.css, which is on the
     colour audit's GRANDFATHERED list — so nothing enforced them, and a sheet
     that may eventually be deleted was acting as the source of truth for the
     most prominent colour on the new home page.

     Volt is NOT --fp-lime. Lime (#C6FF00) is the app-wide primary CTA; volt
     (#D4F53C) is softer and yellower, and is what the immersive mockups use for
     "What's your take?" and Post Take. Keeping both is deliberate: collapsing
     them would quietly restyle either every Go PRO button or the whole takes
     surface.                                                                  */
  --fp-volt:        #D4F53C;
  --fp-volt-dim:    #A8C42E;   /* pressed / disabled volt                       */
  --fp-volt-ink:    #0A0C0F;   /* text ON volt — near-black, ~15:1              */
  --fp-volt-glow:   rgba(212, 245, 60, 0.18);

  /* ─────── Chart series ───────
     A categorical ramp for the admin analytics pages. Six is a deliberate
     ceiling: past six categories a reader cannot match a colour to a legend
     anyway, and the chart should group its tail into "other" rather than add a
     seventh.                                                                  */
  --fp-chart-1:     #4CC9F0;   /* cyan   — primary series                       */
  --fp-chart-2:     #C6FF00;   /* lime   — comparison / current period          */
  --fp-chart-3:     #B15CFF;   /* violet — third series                         */
  --fp-chart-4:     #FFC83D;   /* gold   — fourth                               */
  --fp-chart-5:     #FF7A5C;   /* coral  — fifth                                */
  --fp-chart-6:     #6B7A94;   /* slate  — "other" / remainder                  */
  --fp-chart-grid:  rgba(182, 192, 214, 0.14);   /* axis + gridlines            */
  --fp-chart-ink:   #B6C0D6;   /* axis labels                                   */

  /* ─────── Scrim ───────
     The immersive feed lays text over photography, so it needs gradient
     scrims everywhere. rgba(0,0,0,.6) is a colour-audit violation, and the
     correct form is:
         color-mix(in srgb, var(--fp-scrim) 60%, transparent)
     Declared as its own token rather than reusing --c-scrim so the immersive
     sheet does not depend on the 2.0 alias layer.                             */
  --fp-scrim:       #000000;
  /* Charcoal: the neutral ground of the comments page (fp-thread.css). */
  --fp-charcoal-bg:      #161618;
  --fp-charcoal-surface: #222225;
  --fp-charcoal-line:    #2c2c30;
  --fp-charcoal-text:    #f2f2f4;
  --fp-charcoal-text-2:  #a2a2a8;
  --fp-charcoal-text-3:  #74747b;
  --fp-on-media:         #ffffff;

  /* ─────── Text (unchanged from 2.0 — parity, AA verified below) ─────── */
  --fp-text:        #FFFFFF;   /* AAA on every surface token                    */
  --fp-text-2:      #B6C0D6;   /* AA on all surfaces (≥7:1 on panel)            */
  --fp-muted:       #8F9AAD;   /* AA on bg/base/panel (≥4.5:1)                  */
  --fp-dim:         #5A6477;   /* disabled/placeholder — decorative, not body   */

  /* ─────── Radii (3.0 scale) ─────── */
  --fp-radius-xs:   8px;
  --fp-radius-sm:   12px;
  --fp-radius-md:   16px;
  --fp-radius-lg:   20px;
  --fp-radius-xl:   28px;
  --fp-radius-pill: 999px;

  /* ─────── Elevation — shadows tinted to the deepest navy, never pure black ─────── */
  --fp-elev-1: 0 1px 2px rgba(2, 8, 20, 0.40);
  --fp-elev-2: 0 4px 16px rgba(2, 8, 20, 0.50);
  --fp-elev-3: 0 12px 40px rgba(2, 8, 20, 0.60);
  --fp-glow-lime:   0 0 24px var(--fp-lime-glow);
  --fp-glow-violet: 0 0 32px var(--fp-violet-soft);

  /* ─────── Backdrop blur ─────── */
  --fp-blur-sm: 8px;
  --fp-blur-md: 16px;
  --fp-blur-lg: 28px;

  /* ─────── Auth page (sign in / sign up) ───────
     Consumed only by fp-auth.css (sign.tpl with fp_auth). Moved here verbatim
     from that sheet's local --a-* palette and inline literals so the colour
     audit passes; values are unchanged. The page's lime is --fp-lime itself and
     its focus outline is --fp-text, so neither is repeated here.             */
  --fp-auth-bg:               #060A11;   /* page background                    */
  --fp-auth-card:             #0A0F18;   /* form card                          */
  --fp-auth-line:             rgba(255, 255, 255, 0.08);   /* hairlines        */
  --fp-auth-field:            #0D131D;   /* input fill                         */
  --fp-auth-field-line:       rgba(255, 255, 255, 0.13);   /* input border     */
  --fp-auth-text:             #F3F5F9;   /* primary text                       */
  --fp-auth-text-soft:        #D3D8E1;   /* nav, perks, checkbox label         */
  --fp-auth-muted:            #98A1B1;   /* lead, subtitle, footer note        */
  --fp-auth-label:            #E9EDF4;   /* form labels                        */
  --fp-auth-placeholder:      #7D8697;   /* input placeholder                  */
  --fp-auth-icon:             #8C95A5;   /* field icons, password toggle       */
  --fp-auth-footer-link:      #C3C9D4;   /* footer links                       */
  --fp-auth-lime-ink:         #0B1000;   /* text ON lime on this page          */
  --fp-auth-lime-hover:       #D4FF3D;   /* lime button hover                  */
  --fp-auth-ghost-line:       rgba(255, 255, 255, 0.22);   /* ghost button     */
  --fp-auth-check-line:       rgba(255, 255, 255, 0.3);    /* checkbox border  */
  --fp-auth-focus-border:     rgba(198, 255, 0, 0.6);      /* field focus      */
  --fp-auth-focus-ring:       rgba(198, 255, 0, 0.12);     /* field focus ring */
  --fp-auth-lime-halo:        rgba(198, 255, 0, 0.14);     /* media ring, CTA shadow */
  --fp-auth-lime-halo-hover:  rgba(198, 255, 0, 0.22);     /* CTA hover shadow */
  --fp-auth-violet-halo:      rgba(124, 60, 255, 0.12);    /* media glow       */
  --fp-auth-glow-violet:      rgba(124, 60, 255, 0.07);    /* page backdrop    */
  --fp-auth-glow-lime:        rgba(198, 255, 0, 0.035);    /* page backdrop    */
  --fp-auth-shadow:           rgba(2, 6, 14, 0.45);        /* card shadow      */
  --fp-auth-shadow-strong:    rgba(2, 6, 14, 0.65);        /* media shadow     */
  --fp-auth-cookie-bg:        rgba(10, 15, 24, 0.94);      /* cookie bar       */
  --fp-auth-cookie-shadow:    rgba(2, 6, 14, 0.55);        /* cookie bar       */

  /* ══════ Legacy alias layer ══════
     Re-point the 2.0 --c-* tokens at the 3.0 --fp-* values. Declared after the
     originals, so these win by source order; var() resolves at use-time, so the
     forward reference is fine. Accent aliases are visual no-ops (same hex);
     surface aliases deepen the palette to match the confirmed style guide. */
  --c-bg:        var(--fp-bg-deep);
  --c-bg-2:      var(--fp-surface-base);
  --c-surface:   var(--fp-surface-panel);
  --c-surface-2: var(--fp-surface-raised);
  --c-border:    var(--fp-border);
  --c-border-2:  var(--fp-border-soft);
  --c-lime:      var(--fp-lime);
  --c-lime-glow: var(--fp-lime-glow);
  --c-violet:    var(--fp-violet);
  --c-violet-soft: var(--fp-violet-soft);
  --c-red:       var(--fp-red);
  --c-gold:      var(--fp-gold);
}

/* Surface + hero PRIMITIVES live in fp-surfaces.css (token-only, no literals —
   guarded by console/tests/test_color_audit.php). This file holds the token
   DEFINITIONS; that file consumes them. */

/* The bottom nav only exists ≤880px (layout.css). Overlay offsets must reserve
   its height there — and only there — so the persistent player bar and the
   floating video tile never sit underneath it. */
@media (max-width: 880px) {
  :root {
    --fp-bottom-nav: calc(var(--mobile-bottom-h) + env(safe-area-inset-bottom, 0px));
  }
}