/* Little Lantern brand design tokens — shared across marketing and app shells */

:root {
    --color-olive: #5c6b3a;
    --color-olive-dark: #4a5730;
    --color-cream: #FAEEDA;
    --color-warm-brown: #6b5a3e;
    --color-gold: #c9a84c;
    --color-text-dark: #3d3d3d;
    --color-text-muted: #6b6b6b;
    --font-heading: 'Lora', serif;
    --font-body: 'Nunito', sans-serif;

    /* App / in-product surfaces (landing-page family) */
    --bg-page: #F8EEDB;
    --bg-soft: #FFF7E8;
    --bg-panel-warm: #F8E8D0;
    --border-panel-warm: #D4B88A;
    --shadow-panel-warm:
        0 4px 12px rgba(172, 126, 71, 0.2),
        0 2px 4px rgba(172, 126, 71, 0.12);
    --bg-card: var(--bg-panel-warm);
    --border-soft: #D8B77A;
    --border-card: var(--border-panel-warm);
    --shadow-card: var(--shadow-panel-warm);
    --shadow-card-hover:
        0 6px 18px rgba(172, 126, 71, 0.28),
        0 2px 6px rgba(172, 126, 71, 0.15);

    /* Floating cards on open parchment surfaces */
    --bg-card-float: rgba(255, 247, 232, 0.82);
    --border-card-float: rgba(216, 183, 122, 0.55);
    --shadow-card-float:
        0 10px 24px rgba(85, 58, 24, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.55);

    /* Promo ribbon (in-app referral banner) */
    --bg-promo-ribbon: #FEEED7;
    --bg-promo-ribbon-hover: #FFF4E4;
    --border-promo: rgba(226, 196, 133, 0.22);
    --text-promo: #5D3A1A;

    /* App nav bar height (mobile menu anchor) */
    --app-nav-bar-height: 4rem;

    /* Typography scale (app shell) */
    --text-page: clamp(2rem, 4vw, 2.5rem);
    --text-section: clamp(1.375rem, 2.5vw, 1.625rem);
    --text-story-title: clamp(1.0625rem, 1.5vw, 1.1875rem);
    --text-body: 0.9375rem;
    --text-body-sm: 0.875rem;
    --text-tag: 0.8125rem;

    /* Buttons (landing-aligned) */
    --btn-primary-bg: #4C5A3A;
    --btn-primary-text: #FFF7E8;
    --btn-primary-shadow: 0 6px 16px rgba(47, 55, 31, 0.22);
    --btn-secondary-bg: #FFF7E8;
    --btn-secondary-text: #4C5A3A;
    --btn-secondary-border: #4C5A3A;

    /* Warm lamplight overlay — shared marketing + app parchment feel */
    --bg-parchment-hue:
        radial-gradient(ellipse 80% 50% at 50% 20%, rgba(255, 235, 180, 0.6) 0%, transparent 60%),
        radial-gradient(ellipse 50% 50% at 10% 55%, rgba(220, 170, 90, 0.35) 0%, transparent 50%),
        radial-gradient(ellipse 50% 50% at 90% 55%, rgba(220, 170, 90, 0.35) 0%, transparent 50%),
        radial-gradient(ellipse 100% 50% at 50% 95%, rgba(180, 130, 60, 0.4) 0%, transparent 50%),
        radial-gradient(ellipse 100% 100% at 50% 50%, transparent 40%, rgba(170, 120, 50, 0.3) 100%);
}