/* ================================================================
   HOMEPAGE REDESIGN — Design-token scaffolding
   Branch: homepage-redesign

   This stylesheet provides the CSS custom-property tokens and
   placeholder layout classes for the new homepage design.

   Convention:
   - Layout tokens remain prefixed --bgm-rd-*.
   - Colour tokens alias the semantic palette in brand-colors.css so
     admin themes affect legacy and redesigned surfaces together.

   See docs/HOMEPAGE_REDESIGN_PLAN.md for the phased rollout plan.
   ================================================================ */

/* ----------------------------------------------------------------
   SPACING TOKENS
   ---------------------------------------------------------------- */
:root {
    --bgm-header-height: 64px;
    --bgm-header-height-desktop: 140px;
    --bgm-menu-area-size: var(--bgm-header-height);
    --bgm-rd-paper: var(--bgm-surface-canvas);
    --bgm-rd-ink: var(--bgm-content-ink);
    --bgm-rd-blue: var(--bgm-accent-primary);
    --bgm-rd-blue-rgb: var(--bgm-accent-primary-rgb);
    --bgm-rd-green: var(--bgm-accent-secondary);
    --bgm-rd-green-rgb: var(--bgm-accent-secondary-rgb);
    --bgm-rd-dark: var(--bgm-surface-deep);
    --bgm-rd-dark-rgb: var(--bgm-surface-deep-rgb);
    --bgm-rd-gold: var(--bgm-accent-warm);
    --bgm-rd-gold-rgb: var(--bgm-accent-warm-rgb);
    --bgm-rd-burgundy: var(--bgm-accent-emphasis);
    --bgm-rd-burgundy-rgb: var(--bgm-accent-emphasis-rgb);
    --bgm-rd-max-width: 1280px;
    --bgm-rd-panel-radius: 0;
    /* Canonical site typography roles. Admin styling changes these two values;
       the remaining names are compatibility aliases for older surfaces. */
    --bgm-font-body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --bgm-font-display: var(--bgm-font-body);
    --bgm-rd-font-sans: var(--bgm-font-body);
    --bgm-rd-font-display: var(--bgm-font-display);
    --bs-body-font-family: var(--bgm-font-body);
    --font-body: var(--bgm-font-body);
    --font-heading: var(--bgm-font-display);
    --font-display: var(--bgm-font-display);

    /* Section vertical padding */
    --bgm-rd-section-py:        clamp(3rem, 6vw, 5rem);
    /* Inner content max-width (matches existing home-section__inner) */
    --bgm-rd-content-width:     min(980px, 92vw);

    /* Card/widget spacing */
    --bgm-rd-card-gap:          1.25rem;
    --bgm-rd-card-padding:      1.5rem;
    --bgm-rd-card-radius:       var(--bs-border-radius-lg, 0.5rem);

    /* Hero-specific */
    --bgm-rd-hero-min-height:   min(85vh, 700px);
    --bgm-rd-hero-grid-gap:     1.5rem;

    /* Sidebar stack gap */
    --bgm-rd-sidebar-gap:       1rem;
}

@media (min-width: 1024px) {
    :root {
        --bgm-header-height: var(--bgm-header-height-desktop);
    }
}

body {
    background: var(--bgm-rd-paper);
    color: var(--bgm-rd-ink);
}

.page--home {
    background: var(--bgm-rd-paper);
    color: var(--bgm-rd-ink);
    font-family: var(--bgm-font-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

.page--home .bgm-header,
.page--home button,
.page--home input,
.page--home select,
.page--home textarea {
    font-family: inherit;
}

.page--home h1,
.page--home h2,
.page--home h3,
.page--home .bgm-header__brandText,
.page--home .bgm-coins,
.page--home .bgm-sectionLabel,
.page--home .bgm-rd-kicker {
    font-family: var(--bgm-font-display);
}

/* ----------------------------------------------------------------
   TYPOGRAPHY TOKENS
   ---------------------------------------------------------------- */
:root {
    /* Section headings */
    --bgm-rd-heading-size:      clamp(1.5rem, 3vw, 2rem);
    --bgm-rd-subheading-size:   clamp(1rem, 2vw, 1.25rem);

    /* Kicker / eyebrow text above headings */
    --bgm-rd-kicker-size:       0.75rem;
    --bgm-rd-kicker-tracking:   0.08em;
    --bgm-rd-kicker-weight:     600;
}

/* ----------------------------------------------------------------
   COLOUR TOKENS
   Alias into the stable brand palette rather than new hex values.
   ---------------------------------------------------------------- */
:root {
    /* Section backgrounds — override per section as needed */
    --bgm-rd-section-bg:           transparent;
    --bgm-rd-section-alt-bg:       rgba(var(--bgm-forest-rgb), 0.04);

    /* Hero gradient overlay */
    --bgm-rd-hero-overlay-start:   rgba(var(--bgm-navy-rgb), 0.72);
    --bgm-rd-hero-overlay-end:     rgba(var(--bgm-navy-rgb), 0.40);

    /* Card */
    --bgm-rd-card-bg:              var(--bgm-ivory);
    --bgm-rd-card-border:          var(--bgm-soft-grey);
    --bgm-rd-card-shadow:          var(--bgm-shadow-md);

    /* CTA button */
    --bgm-rd-cta-bg:               var(--bgm-gold);
    --bgm-rd-cta-text:             var(--bgm-navy);
    --bgm-rd-cta-bg-hover:         var(--bgm-gold-hover);
}

/* ----------------------------------------------------------------
   SECTION LAYOUT PLACEHOLDER
   Apply .bgm-rd-section to replace .home-section during migration.
   TODO (Phase 1): Replace .home-section usage in Home.razor with .bgm-rd-section
   ---------------------------------------------------------------- */
.bgm-rd-section {
    padding: var(--bgm-rd-section-py) 0;
    background: var(--bgm-rd-section-bg);
}

.bgm-rd-section--alt {
    background: var(--bgm-rd-section-alt-bg);
}

.bgm-rd-section__inner {
    width: var(--bgm-rd-content-width);
    margin: 0 auto;
}

/* ----------------------------------------------------------------
   SECTION HEADING / KICKER
   TODO (Phase 1–2): Apply these to migrated section headings.
   ---------------------------------------------------------------- */
.bgm-rd-kicker {
    display: block;
    font-size: var(--bgm-rd-kicker-size);
    font-weight: var(--bgm-rd-kicker-weight);
    letter-spacing: var(--bgm-rd-kicker-tracking);
    text-transform: uppercase;
    color: var(--bgm-gold);
    margin-bottom: 0.5rem;
}

.bgm-rd-section-title {
    font-size: var(--bgm-rd-heading-size);
    font-weight: 700;
    color: var(--bgm-text-heading);
    line-height: 1.2;
    margin-bottom: 0.25rem;
}

.bgm-rd-section-subtitle {
    font-size: var(--bgm-rd-subheading-size);
    color: var(--bgm-text-muted);
    margin-bottom: 2rem;
}

/* ----------------------------------------------------------------
   HERO PLACEHOLDER
   TODO (Phase 1): Replace .home-hero in Home.razor.
   ---------------------------------------------------------------- */
.bgm-rd-hero {
    position: relative;
    min-height: var(--bgm-rd-hero-min-height);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* ----------------------------------------------------------------
   CARD GRID
   TODO (Phase 3–4): Use for Games and People grids.
   ---------------------------------------------------------------- */
.bgm-rd-grid {
    display: grid;
    gap: var(--bgm-rd-card-gap);
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}

/* ----------------------------------------------------------------
   CTA BUTTON
   TODO (Phase 1): Apply to guest-hero sign-up and login CTAs.
   ---------------------------------------------------------------- */
.bgm-rd-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: var(--bgm-rd-card-radius);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
    cursor: pointer;
    border: none;
}

.bgm-rd-btn--primary {
    background: var(--bgm-rd-cta-bg);
    color: var(--bgm-rd-cta-text);
}

.bgm-rd-btn--primary:hover,
.bgm-rd-btn--primary:focus-visible {
    background: var(--bgm-rd-cta-bg-hover);
    color: var(--bgm-rd-cta-text);
}

.bgm-rd-btn--ghost {
    background: transparent;
    color: var(--bgm-text-inverse);
    border: 2px solid rgba(var(--bgm-cream-rgb), 0.6);
}

.bgm-rd-btn--ghost:hover,
.bgm-rd-btn--ghost:focus-visible {
    background: rgba(var(--bgm-cream-rgb), 0.12);
    color: var(--bgm-text-inverse);
}