/**
 * SMM Modern Design Tokens
 *
 * Shared design-system tokens for the "modern" sections introduced with the
 * Weekend Study Session showcase. Sections that adopt the modern look
 * (products, sales, future content/landing redesigns, etc.) load this file
 * BEFORE their own stylesheet so they can reference the tokens with var().
 *
 * Keep this file small and consensus-only — values that change here change
 * across every adopting section. Section-specific colors stay local to the
 * section's stylesheet.
 *
 * Naming: --smm-modern-* (brand-neutral within "modern"). Sections may
 * declare local --section-* vars that source from these.
 */

:root {
    /* ---------- Hero / banner ----------
       SMM brand gradient: text-dark → primary-dark → primary. All three
       stops are brand-spec from the SMM Main Colors ramp on p.34 of
       Branding Guidelines.pdf. Gives the "two-toned" left/right depth
       feel while staying inside the brand palette. */
    --smm-modern-bg-hero: linear-gradient(135deg, #1C2949 0%, #1A3E75 55%, #3468B1 100%);

    /* Subtle white slash overlay used on hero ::before for depth. */
    --smm-modern-hero-overlay: rgba(255, 255, 255, 0.04);

    /* ---------- Palette anchors (SMM brand-spec, p.34) ----------
       Primary #3468B1, primary-dark #1A3E75, text-dark #1C2949. */
    --smm-modern-ink-deep: #1C2949;   /* deepest accent — gradient start; inverted chips, focus rings */
    --smm-modern-ink:      #1C2949;   /* primary text on light backgrounds */
    --smm-modern-ink-soft: #1A3E75;   /* body copy / secondary text — brand primary-dark */
    --smm-modern-muted:    #5b6b7b;   /* metadata / tertiary text (functional, no brand anchor) */
    --smm-modern-accent:      #3468B1; /* SMM brand primary */
    --smm-modern-accent-dark: #1A3E75; /* SMM brand primary-dark (hover/active) */

    /* ---------- Surfaces ---------- */
    --smm-modern-bg-soft: #E7F0FA;   /* SMM brand bg-light (p.34) */
    --smm-modern-border:  #BCD0ED;   /* SMM brand tint, subtle border */

    /* ---------- Status ---------- */
    --smm-modern-success: #24D366;   /* SMM brand success green (p.34) */

    /* Default SMM hero eyebrow tint (light blue on the deep-navy hero). */
    --smm-modern-hero-eyebrow: #BCD0ED;

    /* ---------- Typography ---------- */
    /* Sections adopting the modern look use this stack. Load the Poppins
       <link> in your page's enqueue function alongside modern-tokens.css. */
    --smm-modern-font: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;

    /* ---------- Elevation ---------- */
    /* Soft card shadow — buttons, default cards, CTA banners. */
    --smm-modern-shadow:    0 6px 18px rgba(10, 30, 60, 0.08);
    /* Heavier featured/hero shadow — video frames, featured cards. */
    --smm-modern-shadow-lg: 0 16px 40px rgba(10, 30, 60, 0.18);

    /* ---------- Radii ---------- */
    --smm-modern-radius:      14px;  /* cards, banners, hero frames */
    --smm-modern-radius-sm:    8px;  /* inputs, chips, small surfaces */
    --smm-modern-radius-pill: 999px; /* buttons, badges */

    /* ---------- OMM brand variants (p.35) ----------
       Used by sections that opt into the OMM look via `'brand' => 'omm'` in
       their section descriptor. The brand class on the wrapper
       (`.smm-wss--omm`) overrides the local --wss-* vars to point at
       these tokens, so the rest of the stylesheet just inherits the new
       palette — no per-rule duplication.

       Brand-spec primary #EB7D32, shade #EB691D, deepest shade #DC4A0E,
       light tint #FAC39C.

       Hero-gradient deep stops are NOT in the brand doc — derived as
       ~50–70% darker shades within the same hue family so the hero band
       has the same dramatic two-tone depth as SMM (where the brand ramp
       already provides a wide enough value range). All foreground
       primitives (accent, accent-dark, eyebrow) stay strictly brand-spec. */
    --smm-modern-bg-hero-omm:     linear-gradient(135deg, #3D1908 0%, #7A2D0A 55%, #EB7D32 100%);
    --smm-modern-accent-omm:      #EB7D32;
    --smm-modern-accent-dark-omm: #EB691D;
    --smm-modern-hero-eyebrow-omm: #FAC39C; /* light orange for hero eyebrow text */

    /* ---------- CMM brand variants (p.36) ----------
       Brand-spec primary #644B96, shade #5A4696, light tints #826EAF /
       #D1C4DC. The brand's actual purple is notably more muted than the
       legacy CMM landing-page styles (#984dc9) — this is the doc-correct
       palette.

       Same hero-gradient note as OMM: deep stops are derived darker
       shades, foreground primitives stay strictly brand-spec. */
    --smm-modern-bg-hero-cmm:     linear-gradient(135deg, #1F1638 0%, #3E2E62 55%, #644B96 100%);
    --smm-modern-accent-cmm:      #644B96;
    --smm-modern-accent-dark-cmm: #5A4696;
    --smm-modern-hero-eyebrow-cmm: #D1C4DC;

    /* ---------- Card placeholder gradients ----------
       Used when a card has no featured/card image. Brand-tinted so the
       fallback reads as intentional rather than as a missing asset. */
    --smm-modern-card-placeholder:     linear-gradient(135deg, #3468B1 0%, #1A3E75 100%);
    --smm-modern-card-placeholder-omm: linear-gradient(135deg, #EB7D32 0%, #DC4A0E 100%);
    --smm-modern-card-placeholder-cmm: linear-gradient(135deg, #644B96 0%, #5A4696 100%);
}