/*
Theme Name: Nomad Surf
Theme URI: https://nomad.surf
Author: Nomad Surf Camp
Author URI: https://nomad.surf
Description: A premium WordPress theme for Nomad Surf Camp Morocco — fully editable with Elementor. Features a stunning coastal design with glassmorphism navbar, parallax hero, package carousel, reviews grid, and more.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nomad-surf
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-width-template, theme-options, translation-ready
*/

/* ═══════════════════════════════════════════
   DESIGN SYSTEM — CSS Custom Properties
   ═══════════════════════════════════════════ */
:root {
    /* ── Brand Colors ── */
    --surf-teal:        #0093a5;
    --surf-teal-dark:   #007a8a;
    --surf-teal-light:  #00b4cc;
    --surf-dark:        #0a1f2e;
    --surf-dark-deeper: #06141f;
    --surf-slate:       #0f172a;
    --surf-sand:        #f8f5f0;
    --surf-sand-light:  #fdfbf7;
    --surf-mint:        #5eead4;
    --surf-green:       #22c55e;
    --surf-gold:        #f59e0b;
    --surf-coral:       #ef4444;
    --surf-white:       #ffffff;
    --surf-gray-50:     #f8fafc;
    --surf-gray-100:    #f1f5f9;
    --surf-gray-200:    #e2e8f0;
    --surf-gray-300:    #cbd5e1;
    --surf-gray-400:    #94a3b8;
    --surf-gray-500:    #64748b;
    --surf-gray-600:    #475569;
    --surf-gray-700:    #334155;
    --surf-gray-800:    #1e293b;
    --surf-gray-900:    #0f172a;

    /* ── Typography ── */
    --font-body:     'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading:  'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-script:   'Dancing Script', 'Brush Script MT', cursive;

    /* ── Spacing ── */
    --section-padding:   clamp(60px, 8vw, 120px);
    --container-max:     1240px;
    --container-padding: clamp(16px, 4vw, 40px);

    /* ── Borders & Radius ── */
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-pill: 9999px;

    /* ── Shadows ── */
    --shadow-sm:   0 1px 3px rgba(0,0,0,0.08);
    --shadow-md:   0 4px 12px rgba(0,0,0,0.1);
    --shadow-lg:   0 8px 32px rgba(0,0,0,0.12);
    --shadow-xl:   0 16px 48px rgba(0,0,0,0.15);
    --shadow-glass: 0 8px 32px 0 rgba(0,0,0,0.1);

    /* ── Transitions ── */
    --ease-smooth:  cubic-bezier(0.19, 1, 0.22, 1);
    --ease-bounce:  cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --duration-fast: 0.2s;
    --duration-base: 0.3s;
    --duration-slow: 0.5s;
}