/* ============================================================
   theme.css — Wieldex Design Tokens
   All colors, fonts, spacing, shadows.
   Link this FIRST before any other CSS file.
   ============================================================ */

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Poppins:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');



:root {

    /* ── Brand Colors ───────────────────────────────────────── */
    --color-primary:        #195a98;
    --color-primary-hover:  #0b84fa;

    /* ── Background Colors ──────────────────────────────────── */
    --color-bg-light:       #F9FAFB;
    --color-bg-dark:        #0d1723;
    --color-surface-dark:   #121E2D;
    --color-surface-light:  #F9FAFB;

    /* ── Text Colors ────────────────────────────────────────── */
    --color-text-dark:      #1F2937;
    --color-text-light:     #E5E7EB;
    --color-text-muted:     #9CA3AF;

    /* ── Gray Scale ─────────────────────────────────────────── */
    --color-gray-100:       #F3F4F6;
    --color-gray-200:       #E5E7EB;
    --color-gray-300:       #D1D5DB;
    --color-gray-400:       #9CA3AF;
    --color-gray-500:       #6B7280;
    --color-gray-600:       #4B5563;
    --color-gray-700:       #374151;
    --color-gray-800:       #1F2937;
    --color-gray-900:       #111827;

    /* ── Utility Colors ─────────────────────────────────────── */
    --color-white:          #ffffff;
    --color-green-600:      #16A34A;
    --color-red-400:        #F87171;
    --color-yellow-400:     #FBBF24;
    --color-green-400:      #34D399;

    /* ── Scrollbar Colors ───────────────────────────────────── */
    --color-scrollbar-track: #0B1121;
    --color-scrollbar-thumb: #1e293b;
    --color-scrollbar-hover: #334155;

    /* ── Typography ─────────────────────────────────────────── */
    --font-display:     'Playfair Display', serif;
    --font-body:        'Poppins', sans-serif;

    --text-xs:          0.75rem;    /*  12px */
    --text-sm:          0.875rem;   /*  14px */
    --text-base:        1rem;       /*  16px */
    --text-lg:          1.125rem;   /*  18px */
    --text-xl:          1.25rem;    /*  20px */
    --text-2xl:         1.5rem;     /*  24px */
    --text-3xl:         1.875rem;   /*  30px */
    --text-4xl:         2.25rem;    /*  36px */
    --text-5xl:         3rem;       /*  48px */
    --text-6xl:         3.75rem;    /*  60px */
    --text-7xl:         4.5rem;     /*  72px */

    /* ── Spacing ────────────────────────────────────────────── */
    --space-1:          0.25rem;    /*   4px */
    --space-2:          0.5rem;     /*   8px */
    --space-3:          0.75rem;    /*  12px */
    --space-4:          1rem;       /*  16px */
    --space-5:          1.25rem;    /*  20px */
    --space-6:          1.5rem;     /*  24px */
    --space-8:          2rem;       /*  32px */
    --space-10:         2.5rem;     /*  40px */
    --space-12:         3rem;       /*  48px */
    --space-16:         4rem;       /*  64px */
    --space-20:         5rem;       /*  80px */
    --space-24:         6rem;       /*  96px */
    --space-32:         8rem;       /* 128px */

    /* ── Border Radius ──────────────────────────────────────── */
    --radius-sm:        0.25rem;
    --radius-md:        0.5rem;
    --radius-lg:        0.75rem;
    --radius-xl:        1rem;
    --radius-2xl:       1.5rem;
    --radius-full:      9999px;

    /* ── Shadows ────────────────────────────────────────────── */
    --shadow-sm:        0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md:        0 4px 24px rgba(0, 0, 0, 0.1);
    --shadow-lg:        0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-glow:      0 10px 40px rgba(25, 90, 152, 0.4);

    /* ── Layout ─────────────────────────────────────────────── */
    --container-max:    1280px;
    --container-px:     1rem;
    --nav-height:       5rem;       /*  80px */

    /* ── Transitions ────────────────────────────────────────── */
    --transition-fast:      0.2s ease;
    --transition-medium:    0.3s ease;
    --transition-slow:      0.5s ease;
    --transition-xslow:     0.7s ease;

    /* ── Z-index Scale ──────────────────────────────────────── */
    --z-nav:            50;
    --z-preloader:      9000;
    --z-modal:          100;
}


/* ── Dark Mode Token Overrides ──────────────────────────────── */
/* Add class="dark" to <html> to activate                        */
.dark {
    --color-bg-light:       #0d1723;
    --color-surface-light:  #121E2D;
    --color-text-dark:      #E5E7EB;
    --color-text-muted:     #9CA3AF;
    --color-gray-100:       #1F2937;
    --color-gray-200:       #374151;
    --color-gray-300:       #4B5563;
    --color-gray-400:       #6B7280;
    --color-gray-500:       #9CA3AF;
    --color-gray-600:       #D1D5DB;
    --color-gray-700:       #E5E7EB;
    --color-gray-900:       #ffffff;
}