/* CR: fysh-hero-viewport-2026-07-15 — --header-h defined; hero now fills full viewport */
/* =============================================================================
   TOKENS — Creatio design system
   All CSS custom properties live here.
   Do not hard-code colours, spacing, or type values anywhere else.
============================================================================= */

:root {
    /* ── Palette ────────────────────────────────────────────────────────── */
    --navy:        #0F2340;   /* brand dark / primary text on light */
    --blue:        #1E5BA8;   /* interactive / primary action */
    --blue-lt:     #4A9EE0;   /* hover accent, icons */
    --gold:        #C9A84C;   /* signature accent — prices, CTAs, highlights */
    --gold-lt:     #E8C96A;   /* gold hover / hero emphasis */
    --cream:       #F6F5F2;   /* alt section background */
    --slate:       #2C3E50;   /* body copy */
    --muted:       #6B7A8D;   /* secondary text, placeholders */
    --border:      #E2E8F0;   /* dividers, card borders */
    --white:       #FFFFFF;

    /* ── Elevation ──────────────────────────────────────────────────────── */
    --shadow-xs:   0 1px 3px  rgba(15,35,64,.07);
    --shadow-sm:   0 2px 8px  rgba(15,35,64,.09);
    --shadow-md:   0 6px 20px rgba(15,35,64,.13);
    --shadow-lg:   0 16px 48px rgba(15,35,64,.18);

    /* ── Radius ─────────────────────────────────────────────────────────── */
    --radius-sm:   6px;
    --radius-md:   12px;
    --radius-lg:   20px;
    --radius-pill: 999px;

    /* ── Typography ─────────────────────────────────────────────────────── */
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body:    'Inter', system-ui, -apple-system, sans-serif;

    /* ── Layout geometry ─────────────────────────────────────────────────── */
    /* header-inner is explicitly 68px + site-header has 1px border-bottom = 69px total. */
    /* Used in home.css: .hero { min-height: calc(100dvh - var(--header-h)) }           */
    /* hero.js also sets this dynamically on load + resize — CSS value is first-paint   */
    /* fallback; JS value corrects it once DOM is ready.                                */
    --header-h:    69px;

    /* ── Motion ─────────────────────────────────────────────────────────── */
    --ease:        0.22s ease;
    --ease-out:    0.3s cubic-bezier(0.16, 1, 0.3, 1);
}