/* ============================================================
   Nashat International — Design System Variables
   Premium minimalist design tokens
   ============================================================ */

:root {
    /* ── Brand Colors ──────────────────────────────────────── */
    --gold:              #b69542;
    --gold-light:        #d4b96a;
    --gold-dark:         #957a35;
    --gold-glow:         rgba(182, 149, 66, 0.15);
    --gold-border:       rgba(182, 149, 66, 0.15);
    --gold-border-hover: rgba(182, 149, 66, 0.35);

    /* ── Text Colors ───────────────────────────────────────── */
    --text-primary:      #06091a;
    --text-secondary:    #3d4155;
    --text-muted:        #6b7089;
    --text-light:        #9498ad;
    --text-white:        #ffffff;

    /* ── Background Colors ─────────────────────────────────── */
    --bg-primary:        #f6f6f6;
    --bg-white:          #ffffff;
    --bg-card:           rgba(255, 255, 255, 0.55);
    --bg-card-solid:     #ffffff;
    --bg-dark:           #06091a;
    --bg-dark-card:      rgba(255, 255, 255, 0.05);
    --bg-overlay:        rgba(6, 9, 26, 0.6);

    /* ── Glassmorphism ─────────────────────────────────────── */
    --glass-bg:          rgba(255, 255, 255, 0.55);
    --glass-border:      rgba(255, 255, 255, 0.25);
    --glass-blur:        20px;
    --glass-bg-dark:     rgba(255, 255, 255, 0.05);
    --glass-border-dark: rgba(255, 255, 255, 0.08);

    /* ── Shadows ───────────────────────────────────────────── */
    --shadow-sm:         0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md:         0 8px 24px rgba(0, 0, 0, 0.06);
    --shadow-lg:         0 20px 60px rgba(0, 0, 0, 0.06);
    --shadow-xl:         0 32px 80px rgba(0, 0, 0, 0.08);
    --shadow-gold:       0 8px 32px rgba(182, 149, 66, 0.15);
    --shadow-card:       0 4px 20px rgba(0, 0, 0, 0.04);
    --shadow-card-hover: 0 12px 40px rgba(0, 0, 0, 0.08);

    /* ── Typography ────────────────────────────────────────── */
    --font-heading:      'Outfit', sans-serif;
    --font-body:         'Inter', 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 */

    --weight-light:      300;
    --weight-normal:     400;
    --weight-medium:     500;
    --weight-semibold:   600;
    --weight-bold:       700;

    --leading-tight:     1.2;
    --leading-normal:    1.6;
    --leading-relaxed:   1.8;

    --tracking-tight:    -0.02em;
    --tracking-normal:   0;
    --tracking-wide:     0.02em;
    --tracking-wider:    0.05em;
    --tracking-widest:   0.1em;

    /* ── 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:         8px;
    --radius-md:         12px;
    --radius-lg:         16px;
    --radius-xl:         20px;
    --radius-2xl:        24px;
    --radius-3xl:        32px;
    --radius-full:       9999px;

    /* ── Transitions ───────────────────────────────────────── */
    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-slow:   400ms ease;
    --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Layout ────────────────────────────────────────────── */
    --container-sm:      640px;
    --container-md:      768px;
    --container-lg:      1024px;
    --container-xl:      1200px;
    --container-2xl:     1400px;

    --navbar-height:     80px;

    /* ── Z-Index ───────────────────────────────────────────── */
    --z-dropdown:        100;
    --z-sticky:          200;
    --z-navbar:          500;
    --z-overlay:         900;
    --z-modal:           1000;
    --z-toast:           1100;
}

/* ── Dark Mode Variables (Future Support) ──────────────────── */
[data-theme="dark"] {
    --text-primary:      #e8e9ed;
    --text-secondary:    #b0b3c5;
    --text-muted:        #7a7e95;
    --bg-primary:        #0a0d1a;
    --bg-white:          #12152a;
    --bg-card:           rgba(255, 255, 255, 0.04);
    --bg-card-solid:     #161930;
    --glass-bg:          rgba(255, 255, 255, 0.04);
    --glass-border:      rgba(255, 255, 255, 0.06);
    --shadow-sm:         0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md:         0 8px 24px rgba(0, 0, 0, 0.3);
    --shadow-lg:         0 20px 60px rgba(0, 0, 0, 0.4);
    --shadow-card:       0 4px 20px rgba(0, 0, 0, 0.2);
    --shadow-card-hover: 0 12px 40px rgba(0, 0, 0, 0.3);
}