/*
 * Logelite Design Tokens — single source of truth for the th-big child theme.
 * Loaded unconditionally before style.css on every page.
 *
 * Namespace: --lc-*
 * After Phase 2.4 the legacy --green-* / --vp-* vars in style.css and
 * vp-tokens.css will alias these so nothing breaks during migration.
 */

:root {

    /* ── Brand colours ───────────────────────────────────────────── */
    --lc-primary:         #0066cc;
    --lc-primary-hover:   #0052a3;
    --lc-primary-pale:    #dbeafe;
    --lc-primary-subtle:  #3b82f6;   /* lighter accent */
    --lc-secondary:       #e91e8c;   /* pink accent — thank-you, sale badges */

    /* ── Navy scale (dark backgrounds, headings) ─────────────────── */
    --lc-navy-darkest:    #0f172a;
    --lc-navy-dark:       #1e293b;
    --lc-navy-mid:        #1e3a5f;
    --lc-navy-nav:        #1a1a2e;   /* desktop nav link colour */

    /* ── Text ────────────────────────────────────────────────────── */
    --lc-text-dark:       #0f172a;
    --lc-text-muted:      #475569;
    --lc-text-light:      rgba(255, 255, 255, .78);

    /* ── Neutrals ────────────────────────────────────────────────── */
    --lc-white:           #ffffff;
    --lc-cream:           #f8fafc;

    /* ── Semantic overlays (used for nav + mobile menus) ─────────── */
    --lc-overlay-92:      rgba(15, 23, 42, .92);
    --lc-overlay-97:      rgba(15, 23, 42, .97);
    --lc-overlay-98:      rgba(15, 23, 42, .98);

    /* ── Shadows ─────────────────────────────────────────────────── */
    --lc-shadow-sm:       0 2px 12px rgba(13, 13, 26, .08);
    --lc-shadow-md:       0 8px 40px rgba(13, 13, 26, .13);
    --lc-shadow-lg:       0 20px 70px rgba(13, 13, 26, .18);
    --lc-shadow-header:   0 2px 12px rgba(0, 0, 0, .07);

    /* ── Borders ─────────────────────────────────────────────────── */
    --lc-border:          rgba(0, 102, 204, .12);
    --lc-border-mid:      rgba(0, 102, 204, .20);
    --lc-border-header:   #e8ecf0;

    /* ── Border-radius ───────────────────────────────────────────── */
    --lc-radius:          4px;
    --lc-radius-md:       8px;
    --lc-radius-lg:       12px;
    --lc-radius-xl:       20px;
    --lc-radius-pill:     100px;

    /* ── Typography ──────────────────────────────────────────────── */
    --lc-font-display:    'Playfair Display', Georgia, serif;
    --lc-font-body:       'Lato', sans-serif;

    /* ── Motion ──────────────────────────────────────────────────── */
    --lc-transition:      .35s cubic-bezier(.4, 0, .2, 1);

    /* ── Layout ──────────────────────────────────────────────────── */
    --lc-nav-height:      76px;
    --lc-nav-height-sm:   64px;
    --lc-container-max:   1200px;
}