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

/* Fonts — self-hosted, no external requests. Files live in assets/fonts/ */
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/playfair-400-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/playfair-400-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF;
}
@font-face {
    font-family: 'Playfair Display';
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/playfair-400-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
    font-family: 'Playfair Display';
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/playfair-400-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/poppins-300-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/poppins-300-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/poppins-400-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/poppins-400-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/poppins-500-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/poppins-500-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/poppins-600-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/poppins-600-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF;
}



: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;
}