/*
 * ══════════════════════════════════════════════════════════════════════
 *  THEME.CSS  —  The single source of truth for ALL colors, gradients,
 *  fonts, spacing, shadows and transitions.
 *  To retheme the entire site, change only this file.
 * ══════════════════════════════════════════════════════════════════════
 */

:root {
    /* ── Primary : Mint Green ──────────────────────────────────────── */
    --mint-900:  #134E4A;
    --mint-800:  #115E59;
    --mint-700:  #0F766E;
    --mint-600:  #0D9488;
    --mint-500:  #14B8A6;
    --mint-400:  #2DD4BF;   /* ★ Primary Brand Color */
    --mint-300:  #5EEAD4;
    --mint-200:  #99F6E4;
    --mint-100:  #CCFBF1;
    --mint-50:   #F0FDFA;

    /* ── Accent : Reddish Pink ─────────────────────────────────────── */
    --pink-900:  #881337;
    --pink-800:  #9F1239;
    --pink-700:  #BE123C;
    --pink-600:  #E11D48;
    --pink-500:  #F43F5E;   /* ★ Accent Color */
    --pink-400:  #FB7185;
    --pink-300:  #FDA4AF;
    --pink-200:  #FECDD3;
    --pink-100:  #FFE4E6;
    --pink-50:   #FFF1F2;

    /* ── Secondary : Light Blue ────────────────────────────────────── */
    --blue-900:  #0C4A6E;
    --blue-800:  #075985;
    --blue-700:  #0369A1;
    --blue-600:  #0284C7;
    --blue-500:  #0EA5E9;
    --blue-400:  #38BDF8;   /* ★ Secondary Color */
    --blue-300:  #7DD3FC;
    --blue-200:  #BAE6FD;
    --blue-100:  #E0F2FE;
    --blue-50:   #F0F9FF;

    /* ── Neutral ───────────────────────────────────────────────────── */
    --gray-950:  #0A0F1A;
    --gray-900:  #0F172A;
    --gray-800:  #1E293B;
    --gray-700:  #334155;
    --gray-600:  #475569;
    --gray-500:  #64748B;
    --gray-400:  #94A3B8;
    --gray-300:  #CBD5E1;
    --gray-200:  #E2E8F0;
    --gray-100:  #F1F5F9;
    --gray-50:   #F8FAFC;

    /* ── Semantic ──────────────────────────────────────────────────── */
    --color-primary:    var(--mint-400);
    --color-primary-dk: var(--mint-600);
    --color-accent:     var(--pink-500);
    --color-accent-dk:  var(--pink-600);
    --color-secondary:  var(--blue-400);
    --color-secondary-dk: var(--blue-600);
    --color-dark:       var(--gray-900);
    --color-text:       var(--gray-700);
    --color-text-light: var(--gray-500);
    --color-border:     var(--gray-200);
    --color-bg:         #FFFFFF;
    --color-bg-alt:     var(--gray-50);
    --color-bg-mint:    var(--mint-50);
    --color-bg-blue:    var(--blue-50);
    --color-success:    #22C55E;
    --color-warning:    #F59E0B;
    --color-danger:     var(--pink-500);

    /* ── Gradients ─────────────────────────────────────────────────── */
    --grad-hero:     linear-gradient(135deg, var(--mint-50) 0%, var(--blue-50) 45%, var(--pink-50) 100%);
    --grad-primary:  linear-gradient(135deg, var(--mint-400) 0%, var(--blue-400) 100%);
    --grad-brand:    linear-gradient(135deg, var(--mint-600) 0%, var(--blue-600) 60%, var(--pink-500) 100%);
    --grad-cta:      linear-gradient(135deg, var(--mint-600) 0%, var(--blue-600) 100%);
    --grad-card:     linear-gradient(135deg, rgba(45,212,191,0.08) 0%, rgba(56,189,248,0.08) 100%);
    --grad-pink-blue:linear-gradient(135deg, var(--pink-500) 0%, var(--blue-400) 100%);
    --grad-dark:     linear-gradient(135deg, var(--gray-900) 0%, var(--gray-800) 100%);
    --grad-mesh:     radial-gradient(at 40% 20%, var(--mint-100) 0px, transparent 50%),
                     radial-gradient(at 80% 0%,  var(--blue-100) 0px, transparent 50%),
                     radial-gradient(at 0%  50%, var(--pink-100) 0px, transparent 50%),
                     radial-gradient(at 80% 50%, var(--mint-100) 0px, transparent 50%),
                     radial-gradient(at 0%  100%,var(--blue-100) 0px, transparent 50%),
                     radial-gradient(at 80% 100%,var(--pink-100) 0px, transparent 50%);

    /* ── Shadows ───────────────────────────────────────────────────── */
    --shadow-xs:   0 1px 3px rgba(0,0,0,0.06);
    --shadow-sm:   0 2px 8px rgba(45,212,191,0.12);
    --shadow-md:   0 8px 25px rgba(45,212,191,0.18);
    --shadow-lg:   0 20px 60px rgba(45,212,191,0.22);
    --shadow-xl:   0 30px 80px rgba(0,0,0,0.12);
    --shadow-card: 0 4px 20px rgba(0,0,0,0.07);
    --shadow-pink: 0 8px 30px rgba(244,63,94,0.25);
    --shadow-mint: 0 8px 30px rgba(45,212,191,0.30);
    --shadow-blue: 0 8px 30px rgba(56,189,248,0.25);
    --glow-primary: 0 0 40px rgba(45,212,191,0.35);
    --glow-accent:  0 0 40px rgba(244,63,94,0.35);

    /* ── Typography ────────────────────────────────────────────────── */
    --font-sans:    'Poppins', system-ui, -apple-system, sans-serif;
    --font-display: 'Playfair Display', Georgia, serif;
    --font-mono:    'Fira Code', 'Courier New', monospace;

    /* ── Sizing & Spacing ──────────────────────────────────────────── */
    --section-py:  100px;
    --section-py-sm: 60px;
    --nav-height:  80px;
    --radius-sm:   8px;
    --radius-md:   16px;
    --radius-lg:   24px;
    --radius-xl:   32px;
    --radius-full: 9999px;

    /* ── Transitions ───────────────────────────────────────────────── */
    --ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out:    cubic-bezier(0, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --tr:          all 0.3s var(--ease);
    --tr-slow:     all 0.6s var(--ease);
    --tr-fast:     all 0.15s var(--ease);
    --tr-spring:   all 0.5s var(--ease-spring);

    /* ── Z-index layers ────────────────────────────────────────────── */
    --z-base:    1;
    --z-dropdown: 100;
    --z-nav:     500;
    --z-modal:   800;
    --z-toast:   900;
    --z-preload: 9999;
}