/**
 * tokens.css - Design Tokens
 *
 * All CSS custom properties live here. Every other stylesheet
 * consumes these variables, so this file must load first.
 *
 * @package LibrandiOutdoorPower
 * @since   1.1.0
 * @updated 1.4.0 - Typography system rebuilt on four typefaces:
 *                  Bevan (display), Racing Sans One (headings),
 *                  Roboto Flex (body), JetBrains Mono (UI/meta).
 * @updated 0.1.1 - Added --lop-header-h token tracking the
 *                  per-breakpoint sticky-header height so the
 *                  hero's full-viewport min-height calc has a
 *                  single source of truth.
 */

:root {
    /* ----- Brand palette ----- */
    --color-primary:        #2d4a22;
    --color-primary-dark:   #1e3316;
    --color-primary-light:  #3e6330;
    --color-primary-rgb:    45, 74, 34;
    --color-accent:         #d97706;
    --color-accent-hover:   #b45309;
    --color-accent-light:   #f59e0b;
    --color-accent-rgb:     217, 119, 6;

    /* ----- Neutrals ----- */
    --color-white:      #ffffff;
    --color-off-white:  #f8f7f4;
    --color-gray-50:    #f9fafb;
    --color-gray-100:   #f3f4f6;
    --color-gray-200:   #e5e7eb;
    --color-gray-300:   #d1d5db;
    --color-gray-400:   #9ca3af;
    --color-gray-500:   #6b7280;
    --color-gray-600:   #4b5563;
    --color-gray-700:   #374151;
    --color-gray-800:   #1f2937;
    --color-gray-900:   #111827;
    --color-gray-950:   #0b0f19;

    /* ----- Typography -----
     *
     * Four-family system, each with a distinct role:
     *
     * --font-display -- Bevan. Slab serif with heavy presence.
     *                   Used for the hero title and primary brand
     *                   moments only. Too loud for routine headings.
     *
     * --font-heading -- Racing Sans One. Condensed, industrial
     *                   display face. Used for section titles and
     *                   card titles so they read as distinct signage
     *                   without competing with the hero.
     *
     * --font-body    -- Roboto Flex. Variable grotesque with wide
     *                   optical-size range. Used for all paragraph
     *                   copy, long-form reading, and form controls.
     *
     * --font-mono    -- JetBrains Mono. Technical, tactile monospace.
     *                   Used for nav links, buttons, metadata, and
     *                   small labels where a UI-chrome tone fits.
     */
    --font-display: 'Bevan', Georgia, 'Times New Roman', serif;
    --font-heading: 'Racing Sans One', 'Impact', 'Arial Narrow', sans-serif;
    --font-body:    'Roboto Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:    'JetBrains Mono', 'SF Mono', Consolas, 'Liberation Mono', monospace;

    --text-xs:   0.75rem;    /* 12px */
    --text-sm:   0.875rem;   /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg:   1.125rem;   /* 18px */
    --text-xl:   1.25rem;    /* 20px */
    --text-2xl:  1.5rem;     /* 24px */
    --text-3xl:  1.875rem;   /* 30px */
    --text-4xl:  2.25rem;    /* 36px */
    --text-5xl:  3rem;       /* 48px */
    --text-6xl:  3.75rem;    /* 60px */

    --leading-tight:   1.2;
    --leading-snug:    1.35;
    --leading-normal:  1.6;
    --leading-relaxed: 1.75;

    --tracking-tight:  -0.025em;
    --tracking-normal:  0;
    --tracking-wide:    0.05em;

    /* ----- Spacing scale ----- */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* ----- Layout ----- */
    --container-max: 1200px;
    --container-pad: var(--space-6);
    --radius:    6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /*
     * Site-header height per breakpoint.
     *
     * The sticky header has no fixed height of its own -- the bar
     * collapses to whatever the logo image inside it consumes (see
     * header-layout.css). This token mirrors that contract so any
     * downstream rule that needs to subtract the header from the
     * viewport (e.g. anchor-scroll padding, scroll-spy offsets,
     * any hero claim-the-viewport math) stays in sync without a
     * JS measurement step.
     *
     * Default value matches the desktop logo height; the tablet and
     * phone overrides at the bottom of this file step it down so
     * any header-aware math stays accurate at every breakpoint.
     */
    --lop-header-h: 120px;

    /* ----- Shadows ----- */
    --shadow-xs:   0 1px 2px rgba(0,0,0,.04);
    --shadow-sm:   0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --shadow-md:   0 4px 12px rgba(0,0,0,.07);
    --shadow-lg:   0 10px 30px rgba(0,0,0,.10);
    --shadow-xl:   0 20px 50px rgba(0,0,0,.14);
    --shadow-card: 0 1px 3px rgba(0,0,0,.04), 0 6px 16px rgba(0,0,0,.06);

    /* ----- Transitions ----- */
    --ease:          cubic-bezier(.4, 0, .2, 1);
    --ease-out:      cubic-bezier(0, 0, .2, 1);
    --ease-in:       cubic-bezier(.4, 0, 1, 1);
    --ease-spring:   cubic-bezier(.175, .885, .32, 1.275);
    --duration-fast: 0.15s;
    --duration:      0.25s;
    --duration-slow: 0.4s;
}


/*
 * Per-breakpoint overrides for --lop-header-h.
 *
 * The header height token tracks the logo image height per
 * breakpoint (see .lop-logo--header .lop-logo__image rules in
 * header-layout.css). Keeping this contract in tokens.css
 * means downstream consumers (e.g. .hero's full-viewport
 * calc) get the right value for free at every breakpoint --
 * no JS measurement, no media queries duplicated downstream.
 *
 * Tablet  (<= 768px): logo height steps to 96px
 * Phone   (<= 480px): logo height steps to 72px
 */
@media (max-width: 768px) {
    :root {
        --lop-header-h: 96px;
    }
}
@media (max-width: 480px) {
    :root {
        --lop-header-h: 72px;
    }
}