/* ==============================================================================
   GenIsis Holistic Life — CSS Design Tokens & Global Variables
   ============================================================================== */

:root {
    /* ─── Brand Colors (Extracted Directly from Target Site) ──────────── */
    --color-primary-teal: #0dbdad;
    --color-primary-teal-light: #3be2d3;
    --color-primary-teal-dark: #0aa598;
    --color-primary-teal-deep: #07786e;
    --color-primary-teal-glow: rgba(13, 189, 173, 0.45);
    
    --color-amber-gold: #ffb73e;
    --color-amber-gold-light: #ffd27d;
    --color-amber-gold-dark: #e09a25;
    --color-amber-gold-deep: #b87b14;
    --color-amber-gold-soft: rgba(255, 183, 62, 0.16);
    
    --color-deep-indigo: #0c011b;
    --color-indigo-card: #15062c;
    --color-indigo-soft: #231242;
    --color-forest-outline: #2c6914;
    
    --color-ice-blue: #e0f7f5;
    --color-ice-blue-soft: #f0faf9;
    --color-bg-page: #f8fafc;
    --color-pure-white: #ffffff;
    --color-charcoal-body: #334155;
    --color-muted-text: #64748b;
    --color-border-light: rgba(13, 189, 173, 0.15);

    /* ─── Glassmorphism Surfaces ──────────────────────────────────────── */
    --surface-glass-navbar: rgba(255, 255, 255, 0.88);
    --surface-glass-card: rgba(255, 255, 255, 0.94);
    --surface-glass-dark: rgba(12, 1, 27, 0.85);
    --glass-blur-nav: blur(14px);
    --glass-blur-card: blur(10px);
    --glass-border: 1px solid rgba(255, 255, 255, 0.65);
    --glass-border-dark: 1px solid rgba(255, 255, 255, 0.12);

    /* ─── Typography ──────────────────────────────────────────────────── */
    --font-heading-script: 'Great Vibes', 'Playfair Display', cursive, serif;
    --font-heading-serif: 'Playfair Display', Georgia, serif;
    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* ─── Spacing & Layout Tokens ─────────────────────────────────────── */
    --container-max: 1240px;
    --container-narrow: 860px;
    --section-padding-y: clamp(4rem, 8vw, 7rem);
    --section-padding-x: clamp(1.25rem, 4vw, 2.5rem);

    /* ─── Shadows ─────────────────────────────────────────────────────── */
    --shadow-sm: 0 2px 8px rgba(12, 1, 27, 0.06);
    --shadow-md: 0 8px 24px -4px rgba(12, 1, 27, 0.09);
    --shadow-lg: 0 16px 40px -8px rgba(12, 1, 27, 0.14);
    --shadow-card-hover: 0 22px 48px -10px rgba(13, 189, 173, 0.22);

    /* ─── Transitions ─────────────────────────────────────────────────── */
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: 0.15s var(--ease-smooth);
    --transition-normal: 0.25s var(--ease-smooth);
    --transition-slow: 0.45s var(--ease-smooth);
}