/* =====================================================================
   RISE & RUN DESIGN KIT — shared, modular brand language (task-281)
   ---------------------------------------------------------------------
   The SINGLE source of truth for the Rise & Run visual language used by
   every public surface: the brand page (.bd-*), the partner page (.pb-*/.ppx-*)
   and the event-detail page (.events-page). Loaded site-wide right after
   design-system/tokens.css, so:
     - one teal/gold/navy palette,
     - one set of "squared, professional" radii,
     - one canonical button (.rr-btn) reused across pages,
     - per-page stylesheets consume these tokens instead of hardcoding.

   Why this exists: before task-281 the teal #138577 was hardcoded in three
   files, button radii differed per page (0 / 3 / 10 / 12px), and
   event-detail.css even defined a CONFLICTING blue accent (#1d4ed8). This
   file ends that drift. Editorial, not "AI website": flat fills, hairline
   rules, restrained shadows, sharp-ish corners.
   ===================================================================== */

:root {
    /* --- Brand palette (canonical home; partner-brand.css mirrors these) --- */
    --rr-accent:        #138577;   /* primary: links, CTA fill, focus      */
    --rr-accent-deep:   #0f6f64;   /* hover / active                        */
    --rr-accent-bright: #2bb3a3;   /* decorative graphic fills (no text)    */
    --rr-accent-soft:   #e8f5f3;   /* tint backgrounds                      */
    --rr-accent-rgb:    19, 133, 119;

    --rr-gold:          #d4a24c;   /* secondary accent (featured, on dark)  */
    --rr-gold-deep:     #c08f33;
    --rr-gold-soft:     #f6edda;

    --rr-ink:           #1e3a5f;   /* navy text / dark sections             */
    --rr-ink-deep:      #0f2744;
    --rr-paper:         #ffffff;

    /* --- Typography: the brand-page voice (Space Grotesk display + Inter body) ---
       The brand page (which is the design reference) uses Space Grotesk for headings.
       Every related page (partner, run-club) consumes --rr-display so the whole family
       reads with ONE typographic voice instead of Playfair on some pages. (task-283) */
    --rr-display:       'Space Grotesk', 'Inter', system-ui, sans-serif;
    --rr-text:          'Inter', system-ui, sans-serif;

    /* --- Squared, professional radii (one scale, every page) --- */
    --rr-radius-btn:    6px;       /* buttons — squared, not pill           */
    --rr-radius-card:   10px;      /* cards / tiles                         */
    --rr-radius-chip:   999px;     /* pills / flags only                    */
    --rr-radius-sharp:  0;         /* editorial hairline grids              */

    /* --- Shared button shadow (teal-tinted, restrained) --- */
    --rr-btn-shadow:      0 6px 18px rgba(19, 133, 119, .26);
    --rr-btn-shadow-hover: 0 10px 24px rgba(19, 133, 119, .32);
}

/* =====================================================================
   CANONICAL BUTTON  (.rr-btn) — reuse this on any new markup.
   Existing page buttons (.bd-btn / .pb-btn / .btn-register) are aligned to
   the same tokens in their own stylesheets, so the whole site reads as one.
   ===================================================================== */
.rr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .85rem 1.6rem;
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    font-size: .98rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .01em;
    text-decoration: none;
    cursor: pointer;
    border: 1.5px solid transparent;
    border-radius: var(--rr-radius-btn);
    transition: background-color .15s ease, color .15s ease,
                border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.rr-btn:hover { transform: translateY(-2px); text-decoration: none; }
.rr-btn:focus-visible { outline: 3px solid var(--rr-accent-soft); outline-offset: 2px; }

.rr-btn--primary {
    background: var(--rr-accent);
    color: #fff;
    box-shadow: var(--rr-btn-shadow);
}
.rr-btn--primary:hover { background: var(--rr-accent-deep); color: #fff; box-shadow: var(--rr-btn-shadow-hover); }

.rr-btn--ghost {
    background: transparent;
    color: var(--rr-accent);
    border-color: var(--rr-accent);
}
.rr-btn--ghost:hover { background: var(--rr-accent); color: #fff; }

/* Ghost on a dark / photo background (white outline). */
.rr-btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.rr-btn--ghost-light:hover { background: #fff; color: var(--rr-ink); border-color: #fff; }

.rr-btn--gold { background: var(--rr-gold); color: var(--rr-ink-deep); }
.rr-btn--gold:hover { background: var(--rr-gold-deep); color: var(--rr-ink-deep); }

.rr-btn--lg { padding: 1.05rem 2rem; font-size: 1.05rem; }

@media (prefers-reduced-motion: reduce) {
    .rr-btn { transition: none; }
    .rr-btn:hover { transform: none; }
}

/* =====================================================================
   UNIFORM LOGO CELL  (.rr-logo-cell) — standardize logos of wildly
   different source dimensions to ONE visual scale on a hairline tile.
   Used by the brand sponsor wall so every partner logo reads consistent.
   The cell height is fixed; the logo is contained within it.
   ===================================================================== */
.rr-logo-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 2.4vw, 28px);
    background: var(--rr-paper);
    border-radius: var(--rr-radius-card);
}
.rr-logo-cell img {
    max-width: 100%;
    max-height: var(--rr-logo-h, 56px);
    width: auto;
    object-fit: contain;
}