/*
 * shared-design.css
 * Design tokens and utility classes shared across all Sideline Captions pages.
 * Mirrors the visual language established in index.html:
 *   - JetBrains Mono eyebrow labels
 *   - Subtle grid background overlays on dark sections
 *   - Consistent dark section styling
 */

:root {
    --font-label: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
    --color-primary: #6279e6;
    --color-primary-dark: #3842ba;
    --color-bg-deep: #050a12;
    --color-bg-base: #020617;
    --color-bg-card: #09090b;
    --color-border: rgba(255, 255, 255, 0.08);
    --color-text-muted: #64748b;
    --color-text-dim: #94a3b8;
}

/* ── Eyebrow label ─────────────────────────────────────── */

.page-eyebrow {
    font-family: var(--font-label);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    display: block;
    margin: 0 0 1rem;
    line-height: 1.4;
}

.page-eyebrow--light {
    color: rgba(255, 255, 255, 0.85);
}

.page-eyebrow--accent {
    color: var(--color-primary);
}

/* ── Background grid overlay ──────────────────────────── */

.page-gridfx {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 36px, rgba(71, 85, 105, 0.06) 36px, rgba(71, 85, 105, 0.06) 37px),
        repeating-linear-gradient(90deg, transparent, transparent 36px, rgba(71, 85, 105, 0.06) 36px, rgba(71, 85, 105, 0.06) 37px);
}

/* ── Dark section with grid ────────────────────────────── */

.page-section-dark {
    position: relative;
    background: var(--color-bg-deep);
}

.page-section-dark > .page-gridfx ~ * {
    position: relative;
    z-index: 1;
}

/* Ensure children above the grid are stacked */
.page-section-dark > *:not(.page-gridfx) {
    position: relative;
    z-index: 1;
}

/* ── Label font utility ────────────────────────────────── */

.label-font {
    font-family: var(--font-label);
}

/* ── Section kicker (alias for eyebrow) ────────────────── */

.section-kicker {
    font-family: var(--font-label);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    display: block;
    margin: 0 0 0.85rem;
}

/* ── Gradient text (shared) ────────────────────────────── */

.gradient-text {
    background: linear-gradient(135deg, #6279e6 0%, #3842ba 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gradient-bg {
    background: linear-gradient(135deg, #6279e6 0%, #3842ba 100%);
}