/* =========================================================
   Laper Design System — tokens
   Brand: stadium-green energy (everything derived from
   the logo green #44AA00) + modern Inter type.
   ========================================================= */

/* ---- Webfonts ----
   Inter        — modern, technical, the same face used on laper.pl
   Inter Tight  — tighter modern variant for display headlines
                  (gives the headlines a more contemporary feel
                   without leaving the Inter family)
   JetBrains Mono — race-clock / results data
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Inter+Tight:ital,wght@0,500;0,600;0,700;0,800;1,700;1,800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {

    /* =====================================================
       COLOR — every green derived from the logo (#44AA00)
       Single hue scale, 50 → 950, like a Tailwind step.
       Use the named tokens below — the numeric scale is the
       reference; the named tokens are what components consume.
       ===================================================== */
    --laper-green-50:   #f5fbef;
    --laper-green-100:  #e9f7df;
    --laper-green-200:  #c8eda0;
    --laper-green-300:  #a3e060;
    --laper-green-400:  #5cc81a;
    --laper-green-500:  #44aa00;   /* ← LOGO. The brand. */
    --laper-green-600:  #338000;
    --laper-green-700:  #287000;
    --laper-green-800:  #1f5a00;
    --laper-green-900:  #14400a;
    --laper-green-950:  #0a1f00;

    /* Named aliases — what designers actually reach for */
    --laper-green:        var(--laper-green-500);   /* signature, never replace */
    --laper-green-bright: var(--laper-green-400);   /* on-dark accents */
    --laper-green-dark:   var(--laper-green-600);   /* pressed / on white */
    --laper-green-deep:   var(--laper-green-800);   /* legible text on tint */
    --laper-green-pale:   var(--laper-green-100);   /* badges, tints */
    --laper-green-mist:   var(--laper-green-50);    /* section wash */

    /* Optional accent — extreme-bright lime used ONLY inside
       dark surfaces (eco-banner, hero counter). Keep rare. */
    --laper-lime:         #d6ff4d;

    /* =====================================================
       COLOR — neutrals (warmed with a green undertone so the
       blacks read as part of the brand, not generic grey).
       ===================================================== */
    --laper-ink:       #0a0f08;   /* near-black hero canvas */
    --laper-coal:      #14180f;   /* surface dark */
    --laper-graphite:  #1f2419;   /* dark card */
    --laper-slate:     #2e3328;   /* divider on dark */
    --laper-fog:       #5a6356;   /* muted body text */
    --laper-mist:      #8a8f86;   /* soft / tertiary */
    --laper-bone:      #e5e8df;   /* light divider */
    --laper-paper:     #fafaf7;   /* off-white surface */
    --laper-white:     #ffffff;

    /* =====================================================
       COLOR — semantic (kept minimal, brand-aligned hues)
       ===================================================== */
    --laper-success: var(--laper-green-700);
    --laper-warning: #d68910;
    --laper-danger:  #c0392b;
    --laper-info:    #1565c0;

    /* =====================================================
       SEMANTIC SURFACES — light theme defaults
       ===================================================== */
    --fg-1:        var(--laper-ink);
    --fg-2:        var(--laper-fog);
    --fg-3:        var(--laper-mist);
    --fg-on-dark:  #f1f4ec;
    --fg-accent:   var(--laper-green-dark);

    --bg-1:        var(--laper-white);
    --bg-2:        var(--laper-paper);
    --bg-3:        var(--laper-green-mist);
    --bg-inverse:  var(--laper-ink);

    --border-1:        var(--laper-bone);
    --border-2:        rgba(10, 15, 8, 0.08);
    --border-on-dark:  rgba(255, 255, 255, 0.10);

    /* =====================================================
       TYPOGRAPHY — families
       Body:    Inter (modern, the same face as laper.pl)
       Display: Inter Tight (tighter modern variant)
       Italic:  Inter Tight Italic — used for the brand accent
                word (the "nowoczesnych" emphasis), nodding to
                the italic Verdana of the logo without copying it
       Mono:    JetBrains Mono — race clocks, results, IDs
       Logo:    Verdana Bold Italic — ONLY for the wordmark.
                Always use the SVG/PNG asset instead.
       ===================================================== */
    --font-sans:    'Inter', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    --font-display: 'Inter Tight', 'Inter', 'Segoe UI', system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --font-logo:    'Verdana', 'Segoe UI', Tahoma, sans-serif; /* italic bold — wordmark only */

    /* OpenType features — recommended on body to unlock the
       Inter "modern" feel (real single-storey 'a', tabular
       digits inside .lp-data classes via override). */
    --font-features-sans: "cv11", "ss01", "ss03";

    /* =====================================================
       TYPOGRAPHY — type scale (modular ~1.25)
       ===================================================== */
    --fs-12:  12px;
    --fs-14:  14px;
    --fs-16:  16px;   /* body baseline */
    --fs-18:  18px;
    --fs-20:  20px;
    --fs-24:  24px;
    --fs-28:  28px;
    --fs-32:  32px;
    --fs-40:  40px;
    --fs-48:  48px;
    --fs-64:  64px;
    --fs-80:  80px;
    --fs-96:  96px;

    /* line-heights */
    --lh-tight:  1.02;
    --lh-snug:   1.15;
    --lh-normal: 1.45;
    --lh-loose:  1.65;

    /* tracking — Inter Tight wants tight tracking on big sizes */
    --tracking-tightest: -0.045em;
    --tracking-tight:    -0.03em;
    --tracking-snug:     -0.015em;
    --tracking-normal:   0;
    --tracking-wide:     0.04em;
    --tracking-eyebrow:  0.12em;

    /* =====================================================
       SPACING — 4-pt scale
       ===================================================== */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  24px;
    --space-6:  32px;
    --space-7:  48px;
    --space-8:  64px;
    --space-9:  96px;
    --space-10: 128px;

    /* =====================================================
       RADIUS — pills for action, soft-rect for surfaces
       ===================================================== */
    --radius-xs:   4px;
    --radius-sm:   6px;
    --radius-md:  12px;
    --radius-lg:  20px;
    --radius-xl:  28px;
    --radius-pill: 999px;

    /* =====================================================
       SHADOW — warm, green-tinted (not neutral grey)
       ===================================================== */
    --shadow-1:    0 1px 2px rgba(20, 30, 10, 0.04);
    --shadow-2:    0 4px 14px rgba(20, 30, 10, 0.06);
    --shadow-3:    0 12px 36px rgba(20, 30, 10, 0.08);
    --shadow-4:    0 24px 60px -28px rgba(34, 102, 0, 0.55);
    --shadow-glow: 0 0 0 4px rgba(68, 170, 0, 0.22);

    /* =====================================================
       MOTION — fast, snappy, directional (not bouncy)
       ===================================================== */
    --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
    --ease-snap:     cubic-bezier(0.5, 0, 0.1, 1);

    --dur-fast:   140ms;
    --dur-base:   220ms;
    --dur-slow:   420ms;
    --dur-reveal: 700ms;

    /* =====================================================
       LAYOUT
       ===================================================== */
    --container:        1200px;
    --container-narrow: 880px;
    --header-h:         72px;
}

/* =====================================================
   SEMANTIC TYPE CLASSES — use these directly
   ===================================================== */

.lp-display {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(56px, 8vw, 112px);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tightest);
    color: var(--fg-1);
    font-feature-settings: var(--font-features-sans);
}

.lp-display .lp-accent {
    /* Italic accent word — nods to the logo italic, in green */
    font-style: italic;
    color: var(--laper-green-dark);
    font-weight: 800;
}

.lp-h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(36px, 4.5vw, 56px);
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-tight);
    color: var(--fg-1);
    font-feature-settings: var(--font-features-sans);
}

.lp-h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(28px, 3vw, 40px);
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-snug);
    color: var(--fg-1);
}

.lp-h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-24);
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-snug);
    color: var(--fg-1);
}

.lp-h4 {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: var(--fs-18);
    line-height: var(--lh-snug);
    letter-spacing: -0.01em;
    color: var(--fg-1);
}

.lp-lead {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: var(--fs-20);
    line-height: var(--lh-normal);
    color: var(--fg-2);
    letter-spacing: -0.005em;
}

.lp-body {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: var(--fs-16);
    line-height: var(--lh-loose);
    color: var(--fg-1);
    font-feature-settings: var(--font-features-sans);
}

.lp-body-sm {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: var(--fs-14);
    line-height: var(--lh-normal);
    color: var(--fg-2);
}

.lp-eyebrow {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: var(--fs-12);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--fg-accent);
}

.lp-caption {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: var(--fs-12);
    line-height: 1.4;
    color: var(--fg-3);
}

/* Race-clock / number display — tabular */
.lp-data {
    font-family: var(--font-mono);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    color: var(--fg-1);
}

.lp-data-xl {
    font-family: var(--font-mono);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: clamp(48px, 8vw, 96px);
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--fg-1);
}

/* Logo wordmark — kept for completeness; in production use the
   SVG asset (assets/logo-laper.svg) instead of re-typesetting. */
.lp-logo-mark {
    font-family: var(--font-logo);
    font-weight: 700;
    font-style: italic;
    letter-spacing: -0.01em;
    color: var(--laper-green);
}