/* design-tokens.css — YallaTonight Version 2.0 Design System Source of Truth */
:root {
    /* --- COLORS --- */
    --color-gold: #7C3AED;
    --color-gold-light: #A78BFA;
    --color-gold-dim: rgba(124, 58, 237, 0.12);
    --color-black: #0a0a0a;
    --color-surface: #141414;
    --color-surface-2: #1e1e1e;
    --color-border: rgba(255, 255, 255, 0.08);
    --color-text-primary: #f5f5f5;
    --color-text-muted: rgba(245, 245, 245, 0.55);
    --color-white: #ffffff;

    /* --- TYPOGRAPHY --- */
    --font-display: 'Syne', sans-serif;
    --font-heading: 'Syne', sans-serif;
    --font-body: 'DM Sans', sans-serif;

    /* --- SPACING (8px base) --- */
    --spacing-1: 8px;
    --spacing-2: 16px;
    --spacing-3: 24px;
    --spacing-4: 32px;
    --spacing-5: 48px;
    --spacing-6: 64px;
    --spacing-7: 96px;

    /* --- RADIUS --- */
    --radius-sm: 4px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* --- SHADOWS / GLOWS --- */
    --cta-glow: 0 0 24px rgba(124, 58, 237, 0.2);
}

/* --- ARABIC FONT OVERRIDES --- */
html[lang="ar"] {
    --font-display: 'Noto Kufi Arabic', sans-serif;
    --font-heading: 'Noto Kufi Arabic', sans-serif;
    --font-body: 'Noto Kufi Arabic', sans-serif;
}

/* Global design tokens integration helper */
.h1-display {
    font-family: var(--font-display);
    font-size: 56px;
    font-weight: 700;
    line-height: 1.15;
}

.h2-display {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 600;
    line-height: 1.25;
}

.h3-display {
    font-family: var(--font-body);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.35;
}

.body-text {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;
    color: var(--color-text-primary);
}

.caption-text {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text-muted);
}

/* ── Responsive Typography Scale ── */
@media (max-width: 768px) {
    .h1-display { font-size: clamp(28px, 7vw, 42px); }
    .h2-display { font-size: clamp(22px, 5.5vw, 32px); }
    .h3-display { font-size: clamp(18px, 4.5vw, 22px); }
    .body-text  { font-size: 15px; }
}
@media (max-width: 480px) {
    .h1-display { font-size: clamp(24px, 6.5vw, 34px); }
    .h2-display { font-size: clamp(20px, 5vw, 28px); }
    .body-text  { font-size: 14px; line-height: 1.6; }
}