/* design-tokens.css — YallaTonight Version 2.0 Design System Source of Truth */
:root {
    /* ============================================================
       BRAND — THE single source of truth for the brand hue.
       §4.1 decision: VIOLET is the primary brand; real GOLD is a
       luxury accent. Every other stylesheet's brand token now aliases
       back to --brand (see style.css / theme-light.v2.css / premium.css),
       so the brand colour lives in exactly ONE place. NOTE: the historical
       tokens named "gold" (--color-gold, --gold, --theme-accent) actually
       render VIOLET #7C3AED — the names lie. They are kept as back-compat
       aliases below; prefer --brand / --accent-gold in new code.
       ============================================================ */
    --brand:        #7C3AED;   /* primary brand — VIOLET (not gold) */
    --brand-strong: #6D28D9;   /* deeper violet (gradients / hover)   */
    --brand-light:  #8B5CF6;   /* lighter violet                      */
    --brand-soft:   #A78BFA;   /* soft violet tint                    */
    --brand-weak:   rgba(124, 58, 237, 0.12);
    --accent-gold:  #f59e0b;   /* the REAL luxury gold accent          */

    /* Section identity (§1.2 / §4.4). Default = brand; the partner layout
       overrides these per venue section on `.partner-layout` so the chrome
       (nav, stat icons, focus rings, card glows) renders in-section: a bar
       partner sees cyan, a restaurant partner rose, a trips partner amber. */
    --section-accent:       var(--brand);
    --section-accent-weak:  rgba(124, 58, 237, 0.10);
    --section-accent-faint: rgba(124, 58, 237, 0.06);
    --section-accent-line:  rgba(124, 58, 237, 0.35);
    --section-accent-glow:  rgba(124, 58, 237, 0.25);

    /* --- COLORS --- */
    /* Back-compat aliases — historical "gold" names that render VIOLET. */
    --color-gold: var(--brand);
    --color-gold-light: var(--brand-soft);
    --color-gold-dim: var(--brand-weak);
    --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);

    /* --- MOTION (§4.7) — centralized easing + durations so every surface
       animates with one voice. The global `prefers-reduced-motion` guard in
       section-polish.css neutralizes these for users who ask for less motion. */
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    --dur-fast: 140ms;
    --dur-base: 240ms;
    --dur-slow: 420ms;
}

/* --- 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; }
}