/*
 * GregPlitt 2026 — design tokens (Performance direction).
 * Single source of truth for color, type, spacing, motion. Components
 * reference these custom properties — never raw hex.
 *
 * Per design handoff (design_handoff_performance/README.md):
 *   - Background is #050505 (NOT #000)
 *   - Gold is exactly #FFBA00 (NOT #FFC107 or #FFD700)
 *   - Border radius is 0 EVERYWHERE — hard-edged design
 *   - Three fonts only: Bebas Neue (display) + Manrope (body) + JetBrains Mono (meta)
 */

:root {
    /* Color — palette */
    --gp-bg:           #050505;                       /* page background */
    --gp-surface:      #0c0c0c;                       /* cards, testimonial */
    --gp-surface-2:    #141414;                       /* hover / elevated */
    --gp-border:       rgba(255, 255, 255, 0.08);     /* hairlines */
    --gp-border-strong:rgba(255, 255, 255, 0.18);     /* active-state borders */

    /* Color — text */
    --gp-text:         #ffffff;
    --gp-text-dim:     rgba(255, 255, 255, 0.55);
    --gp-text-muted:   rgba(255, 255, 255, 0.35);

    /* Color — accent (gold). Use SPARINGLY — punctuation only. */
    --gp-gold:         #FFBA00;
    --gp-gold-deep:    #D69A00;                        /* hover/pressed */
    --gp-text-on-gold: #000000;                        /* black text on gold buttons */

    /* Typography — families */
    --gp-font-display: 'Bebas Neue', Impact, sans-serif;
    --gp-font-body:    'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --gp-font-mono:    'JetBrains Mono', ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, monospace;

    /* Typography — display sizes (Bebas Neue) */
    --gp-fs-h1:        132px;     /* hero, video index page title */
    --gp-fs-h2-lg:     88px;      /* big-video-band, detail page title */
    --gp-fs-h2:        72px;      /* fresh-from-the-vault */
    --gp-fs-h2-sm:     44px;      /* the-full-vault, related row */
    --gp-fs-stat:      86px;      /* stats band numbers */
    --gp-fs-card-lg:   56px;      /* index page featured card title */
    --gp-fs-card:      22px;      /* featured card titles */
    --gp-fs-card-sm:   20px;      /* standard card titles */
    --gp-fs-btn:       18px;      /* primary button */
    --gp-fs-btn-sm:    14px;      /* small button */
    --gp-fs-nav:       18px;      /* main nav */
    --gp-fs-pill:      15px;      /* filter pill */
    --gp-fs-logo:      28px;      /* wordmark */

    /* Typography — body (Manrope) */
    --gp-fs-body-lg:   18px;      /* detail-page paragraphs */
    --gp-fs-body:      17px;      /* default body */
    --gp-fs-body-sm:   14px;      /* footer links */
    --gp-fs-quote:     26px;      /* testimonial quote */

    /* Typography — meta (JetBrains Mono) */
    --gp-fs-meta:      11px;      /* eyebrow labels, breadcrumb, meta lines */
    --gp-fs-meta-sm:   10px;      /* utility bar, footer headings */
    --gp-fs-meta-xs:   9px;       /* tiny annotations */

    /* Letter spacing */
    --gp-ls-display-tight:    -0.01em;   /* hero h1 */
    --gp-ls-display-normal:    0.02em;   /* most display */
    --gp-ls-display-wide:      0.04em;   /* card titles */
    --gp-ls-display-wider:     0.08em;   /* logo wordmark */
    --gp-ls-nav:               0.14em;   /* main nav, button labels */
    --gp-ls-pill:              0.10em;   /* filter pills */
    --gp-ls-meta:              0.18em;   /* mono labels */
    --gp-ls-meta-wide:         0.22em;   /* eyebrow mono */
    --gp-ls-meta-wider:        0.24em;   /* footer column heads */
    --gp-ls-meta-widest:       0.30em;   /* vertical hero rails */

    /* Line height */
    --gp-lh-display:           0.88;     /* hero h1 */
    --gp-lh-display-snug:      0.95;     /* h2 / detail title */
    --gp-lh-display-normal:    1.1;      /* card titles */
    --gp-lh-body:              1.5;      /* paragraphs */
    --gp-lh-quote:             1.35;     /* testimonial */
    --gp-lh-tight:             1;        /* stat numbers, big titles */

    /* Spacing — page rhythm */
    --gp-page-gutter:          40px;     /* L/R padding on all sections */
    --gp-section-py:           90px;     /* major section vertical padding */
    --gp-section-py-sm:        70px;     /* tighter sections */
    --gp-section-py-xs:        50px;     /* hero adjacency / index headers */
    --gp-grid-gap:             24px;     /* card grid gap */
    --gp-grid-gap-sm:          20px;     /* tighter grid (4-col) */

    /* Spacing — component scale (4pt base) */
    --gp-space-1:              4px;
    --gp-space-2:              8px;
    --gp-space-3:              12px;
    --gp-space-4:              16px;
    --gp-space-5:              20px;
    --gp-space-6:              24px;
    --gp-space-7:              32px;
    --gp-space-8:              40px;
    --gp-space-9:              60px;

    /* Hairlines */
    --gp-hairline-len:         24px;     /* gold accent line next to eyebrow */
    --gp-hairline-len-lg:      36px;     /* longer accent lines (hero) */

    /* Borders & rules */
    --gp-border-w:             1px;
    --gp-border-w-strong:      1.5px;    /* active-state borders */
    --gp-radius:               0;        /* hard edges everywhere */

    /* Shadow (used sparingly) */
    --gp-shadow-lift:          0 18px 40px rgba(0, 0, 0, 0.4);

    /* Motion */
    --gp-dur-fast:             120ms;
    --gp-dur-base:             200ms;
    --gp-dur-slow:             400ms;
    --gp-dur-slower:           700ms;
    --gp-ease-standard:        cubic-bezier(0.2, 0, 0, 1);
    --gp-ease-out:             cubic-bezier(0.33, 1, 0.68, 1);

    /* Container — design is desktop-first 1280px */
    --gp-container-max:        none;     /* sections are full-width with internal gutter */
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --gp-dur-fast:   0ms;
        --gp-dur-base:   0ms;
        --gp-dur-slow:   0ms;
        --gp-dur-slower: 0ms;
    }
}