/**
 * www-design-tokens.css — v1.0.0
 * ============================================================================
 * Shared CSS custom property contract for PHP/Bootstrap www projects.
 *
 * Projects:  jenninexus · neophi · jerry-vr · boobsofwar · martiangames
 * Framework: PHP + Bootstrap 5.3.8 + vanilla JS
 * Bootstrap: 5.3.8 (theme switching via [data-bs-theme="light|dark"])
 *
 * SSOT:     C:\Github\www-theme-kit\tokens\www-design-tokens.css
 * Docs:     C:\Github\www-theme-kit\docs\PROTOCOL.md
 * Skill:    /theme www
 *
 * ── UPDATE PROTOCOL ──────────────────────────────────────────────────────────
 * 1. Edit THIS file in www-theme-kit (the SSOT — never edit in-project copies)
 * 2. git commit + push from C:\Github\www-theme-kit
 * 3. Copy changed sections into each project's src/assets/css/
 *    (copy-on-update — no @import, no symlinks)
 * 4. Each project rebuilds: pwsh scripts/build.ps1 (or build-all.ps1)
 *
 * ── LOAD ORDER ───────────────────────────────────────────────────────────────
 * 1. www-design-tokens.css   ← this file (shared contract)
 * 2. theme-variables.css     ← project brand values + Tier 2 overrides
 * 3. main.css                ← core layout
 * 4. *-theme.css             ← page-specific color overrides
 *
 * ── TOKEN TIERS ──────────────────────────────────────────────────────────────
 * Tier 1 — Social brand colors: identical hex values confirmed across all
 *           projects. Copy as-is. Do NOT override in your theme-variables.css.
 *
 * Tier 2 — Structural tokens: shared NAMES, project-specific VALUES.
 *           Copy the names. Override values in your theme-variables.css.
 *           Defaults here are a neutral dark-mode baseline.
 *
 * NOT here — Brand identity: --primary/secondary/accent, body backgrounds,
 *             typography, page-specific themes. These live in each project's
 *             own theme-variables.css only.
 * ============================================================================
 */


/* ═══════════════════════════════════════════════════════════════════════════
   TIER 1 — SOCIAL BRAND COLORS
   Confirmed identical across all www projects. Never override.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {

  /* Discord ── */
  --brand-discord:           #5865F2;
  --brand-discord-rgb:       88, 101, 242;

  /* YouTube ── */
  --brand-youtube:           #FF0000;
  --brand-youtube-rgb:       255, 0, 0;

  /* X / Twitter ── */
  --brand-x:                 #000000;
  --brand-x-rgb:             0, 0, 0;
  --brand-twitter:           #1DA1F2;   /* legacy blue — keep for backwards compat */
  --brand-twitter-rgb:       29, 161, 242;

  /* Facebook ── */
  --brand-facebook:          #1877F2;
  --brand-facebook-rgb:      24, 119, 242;

  /* Instagram ── */
  --brand-instagram:         #E1306C;
  --brand-instagram-rgb:     225, 48, 108;

  /* TikTok ── */
  --brand-tiktok:            #010101;
  --brand-tiktok-rgb:        1, 1, 1;

  /* Twitch ── */
  --brand-twitch:            #9146FF;
  --brand-twitch-rgb:        145, 70, 255;

  /* Patreon ── */
  --brand-patreon:           #FF424D;
  --brand-patreon-rgb:       255, 66, 77;

  /* Steam ── */
  --brand-steam:             #171A21;
  --brand-steam-rgb:         23, 26, 33;
  --brand-steam-blue:        #1B2838;
  --brand-steam-blue-rgb:    27, 40, 56;

  /* GitHub ── */
  --brand-github:            #333333;
  --brand-github-rgb:        51, 51, 51;

  /* LinkedIn ── */
  --brand-linkedin:          #0A66C2;
  --brand-linkedin-rgb:      10, 102, 194;

  /* Reddit ── */
  --brand-reddit:            #FF4500;
  --brand-reddit-rgb:        255, 69, 0;

  /* Spotify ── */
  --brand-spotify:           #1DB954;
  --brand-spotify-rgb:       29, 185, 84;

  /* Amazon ── */
  --brand-amazon:            #FF9900;
  --brand-amazon-rgb:        255, 153, 0;

  /* PayPal ── */
  --brand-paypal:            #003087;
  --brand-paypal-rgb:        0, 48, 135;

  /* GoFundMe ── */
  --brand-gofundme:          #02A95C;
  --brand-gofundme-rgb:      2, 169, 92;

  /* Ko-fi ── */
  --brand-kofi:              #FF5E5B;
  --brand-kofi-rgb:          255, 94, 91;

  /* Bluesky ── */
  --brand-bluesky:           #0085FF;
  --brand-bluesky-rgb:       0, 133, 255;

  /* Threads ── */
  --brand-threads:           #000000;
  --brand-threads-rgb:       0, 0, 0;

}


/* ═══════════════════════════════════════════════════════════════════════════
   TIER 2 — STRUCTURAL TOKENS
   Shared names. Dark-mode baseline defaults. Override in theme-variables.css.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {

  /* ── Glass morphism ─────────────────────────────────────────────────────────
     Override --glass-bg with rgba(your-brand-color, 0.05–0.15) for dark.
     Override --glass-border with rgba(your-primary-rgb, 0.15–0.25).
     --glass-blur: 10–16px is the standard range.
     JenniNexus: glass-bg=rgba(249,243,251,0.85), blur=12px
     Jerry VR:   glass-bg=rgba(0,0,0,0.8), blur=12px
     Martian:    glass-bg=rgba(0,0,0,0.6), blur=10px
     ────────────────────────────────────────────────────────────────────── */
  --glass-bg:                rgba(0, 0, 0, 0.65);
  --glass-border:            rgba(255, 255, 255, 0.12);
  --glass-blur:              12px;
  --glass-saturate:          1.2;

  /* ── Shadow scale ───────────────────────────────────────────────────────────
     Dark defaults — multiply opacity for light mode (see [data-bs-theme] below).
     Use --shadow-sm for subtle card lift, --shadow-xl for modals/drawers.
     ────────────────────────────────────────────────────────────────────── */
  --shadow-sm:               0 2px 8px  rgba(0, 0, 0, 0.40);
  --shadow-md:               0 4px 16px rgba(0, 0, 0, 0.50);
  --shadow-lg:               0 8px 32px rgba(0, 0, 0, 0.60);
  --shadow-xl:               0 16px 48px rgba(0, 0, 0, 0.70);

  /* ── Glow tokens ────────────────────────────────────────────────────────────
     Override with rgba(your-primary-rgb, opacity).
     Low opacity (0.2–0.35) for professional look. Neophi/MG go higher (0.5–0.7)
     for intentionally intense neon aesthetics — adjust to brand personality.
     ────────────────────────────────────────────────────────────────────── */
  --glow-primary:            rgba(139, 106, 255, 0.25);
  --glow-secondary:          rgba(255, 46, 136, 0.20);
  --glow-accent:             rgba(61, 216, 216, 0.20);

  /* ── Border radius scale ─────────────────────────────────────────────────────
     Sharp aesthetic: xs=2px, sm=4px, md=6px, lg=8px
     Default aesthetic: xs=4px, sm=8px, md=12px, lg=16px (Bootstrap feel)
     Soft/rounded aesthetic: xs=8px, sm=12px, md=16px, lg=24px
     ────────────────────────────────────────────────────────────────────── */
  --radius-xs:               4px;
  --radius-sm:               8px;
  --radius-md:               12px;
  --radius-lg:               16px;
  --radius-pill:             9999px;

  /* ── Motion & easing ────────────────────────────────────────────────────────
     These exact values are safe to share — same spec in all www projects.
     --ease-standard   = Material M3 standard easing (most UI transitions)
     --ease-emphasized = spring-like overshoot (button clicks, card entrances)
     --ease-decelerate = elements entering screen
     --ease-accelerate = elements leaving screen
     ────────────────────────────────────────────────────────────────────── */
  --motion-fast:             150ms;
  --motion-normal:           280ms;
  --motion-slow:             420ms;
  --ease-standard:           cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized:         cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-decelerate:         cubic-bezier(0, 0, 0.2, 1);
  --ease-accelerate:         cubic-bezier(0.4, 0, 1, 1);

}


/* ── Light mode overrides ─────────────────────────────────────────────────────
   Bootstrap 5.3.8 light/dark switching via [data-bs-theme].
   Projects must override --glass-bg to their own light surface color.
   JenniNexus light: glass-bg=rgba(249,243,251,0.85) (soft lavender glass)

   ⚠️  BODY CASCADE TRAP — read before shipping light mode:
   If your theme-system.js sets data-bs-theme on BOTH <html> AND <body>
   (Bootstrap does html; many projects also do body for specificity), then
   the [data-bs-theme="light"] selector below matches body too. CSS custom
   properties cascade via DOM inheritance, so body's --glass-bg value
   (rgba(255,255,255,0.85)) SHADOWS :root's dark-mode value for every
   descendant — panels go white in light mode even with a dark design.

   FIX: In your project CSS (after this file loads), add body-scoped overrides:
     body[data-bs-theme="light"], body[data-theme="light"] {
       --glass-bg: rgba(YOUR_DARK_VALUE);    ← your intended light value
       --glass-border: rgba(YOUR_BORDER);
     }
   See brand-overrides-template.css § "Body cascade override" for the template.
   ──────────────────────────────────────────────────────────────────────────── */

[data-bs-theme="light"] {
  --glass-bg:                rgba(255, 255, 255, 0.85);
  --glass-border:            rgba(0, 0, 0, 0.08);

  --shadow-sm:               0 2px 8px  rgba(0, 0, 0, 0.06);
  --shadow-md:               0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-lg:               0 8px 32px rgba(0, 0, 0, 0.14);
  --shadow-xl:               0 16px 48px rgba(0, 0, 0, 0.18);
}


/* ── Reduced motion ───────────────────────────────────────────────────────────
   All animations defined using these tokens are automatically disabled.
   Applies universally — never conditionalize motion support in component code.
   ──────────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast:           0ms;
    --motion-normal:         0ms;
    --motion-slow:           0ms;
  }
}