/*
 * theme-vars.css
 * ─────────────────────────────────────────────────────────────
 * Single source of truth for all CSS custom properties.
 * Enqueue this FIRST in yippee-assets.php so every other
 * stylesheet can consume these variables.
 *
 * Usage:  color: var(--color-brand-primary);
 * ─────────────────────────────────────────────────────────────
 */

:root {

    /* ── Brand — Amber ───────────────────────────────────────── */
    --color-brand-primary:          #FCAA3C;
    --color-brand-primary-hover:    #FAA826;
    --color-brand-primary-rgb:      252, 170, 60;   /* for rgba() → rgba(var(--color-brand-primary-rgb), 0.5) */

    /* ── Brand — Cyan ────────────────────────────────────────── */
    --color-brand-secondary:        #0C94C4;
    --color-brand-secondary-rgb:    12, 148, 196;
    --color-brand-accent:           #4DA8BF;

    /* ── Text & Dark ─────────────────────────────────────────── */
    --color-text-dark:              #1E293B;
    --color-text-muted:             #444444;
    --color-white:                  #ffffff;

    /* ── Error / Red ─────────────────────────────────────────── */
    --color-error:                  #EF4444;
    --color-error-dark:             #B91C1C;
    --color-error-darker:           #DC2626;
    --color-error-bg:               #FEF2F2;
    --color-error-shadow:           rgba(185, 28, 28, 0.1);

    /* ── Backgrounds & Neutrals ──────────────────────────────── */
    --color-bg-warm:                #FFF7ED;
    --color-bg-cool:                #F0FAFF;
    --color-bg-surface:             #F8FAFC;
    --color-bg-hover:               #F3F3F3;
    --color-itinerary-bg:           #AFE2F566;
    --color-highlight:              #FEF08A;

    /* ── Borders ─────────────────────────────────────────────── */
    --color-border-light:           #E2E8F0;
    --color-border-subtle:          #F1F5F9;
    --color-outline-btn:            #E0E0E0;

    /* ── Navigation (glass / translucent) ────────────────────── */
    --color-nav-glass-white:        rgba(255, 255, 255, 0.16);
    --color-nav-glass-dark:         rgba(30, 41, 59, 0.10);
    --color-nav-border:             rgba(255, 255, 255, 0.15);

    /* ── Extended Text ───────────────────────────────────────── */
    --color-text-secondary:        #475569;   /* slate-600, labels & paragraphs */

    /* ── Social / Messaging ──────────────────────────────────── */
    --color-whatsapp:               #25D366;
    --color-whatsapp-hover:         #1DAE54;   /* optional darker hover */

    /* ── Form Inputs ─────────────────────────────────────────── */
    --color-border-input:          #D1D5DB;   /* form field borders */

    /* ── Brand — Cyan hover ──────────────────────────────────── */
    --color-brand-secondary-hover: #087EA6;   /* cyan darker hover */

    /* ── Typography ──────────────────────────────────────────── */
    --font-heading:   'Nunito', ui-sans-serif, system-ui;
    --font-display:   'Brevia', sans-serif;

}