/**
 * Imaan360 - Design System Tokens
 * Source of Truth: mockups/DESIGN_PROPOSAL.md (Option A "Sacred Noor")
 */

:root {
    /* Color Tokens - Dark Mode Default */
    --bg-base: #0b1f23;
    --bg-surface: #102a30;
    --bg-surface-elevated: #163840;
    --bg-glass: rgba(16, 42, 48, 0.72);
    --bg-glass-card: rgba(22, 56, 64, 0.65);
    --bg-glass-hover: rgba(28, 70, 80, 0.82);
    --border-glass: rgba(212, 175, 55, 0.22);
    --border-subtle: rgba(255, 255, 255, 0.08);

    /* Brand Accent & Gradients */
    --gold-primary: #d4af37;
    --gold-light: #f9e79f;
    --gold-dark: #aa820a;
    --teal-accent: #2dd4bf;
    --teal-deep: #1f7a63;
    --gradient-gold: linear-gradient(135deg, #f9e79f 0%, #d4af37 50%, #aa820a 100%);
    --gradient-accent: linear-gradient(135deg, #d4af37 0%, #2dd4bf 100%);
    --gradient-hero: radial-gradient(circle at 50% 20%, rgba(212, 175, 55, 0.14) 0%, rgba(31, 122, 99, 0.18) 45%, transparent 75%);

    /* Typography & Neutrals */
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --text-inverse: #0b1f23;

    /* Semantics */
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;

    /* Fluid Typography Scale (Continuous clamp from 320px to 1440px) */
    --font-xs: clamp(0.72rem, 0.70rem + 0.10vw, 0.80rem);
    --font-sm: clamp(0.82rem, 0.80rem + 0.15vw, 0.92rem);
    --font-base: clamp(0.95rem, 0.92rem + 0.20vw, 1.05rem);
    --font-md: clamp(1.10rem, 1.05rem + 0.35vw, 1.28rem);
    --font-lg: clamp(1.35rem, 1.25rem + 0.65vw, 1.65rem);
    --font-xl: clamp(1.75rem, 1.55rem + 1.10vw, 2.35rem);
    --font-2xl: clamp(2.20rem, 1.90rem + 1.80vw, 3.20rem);

    /* Typography Families */
    --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-arabic: "Amiri", "Scheherazade New", "Traditional Arabic", serif;

    /* Spacing Tokens (4px Grid) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    /* Elevation & Radius */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-pill: 9999px;
    --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    --shadow-glow: 0 0 25px rgba(212, 175, 55, 0.25);
    --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.5);

    /* Motion Tokens */
    --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --dur-fast: 180ms;
    --dur-normal: 320ms;
    --dur-slow: 600ms;

    /* Layout Boundaries */
    --container-max: 1240px;
    --tab-bar-height: 64px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Light Mode Theme Tokens */
[data-theme="light"] {
    --bg-base: #f4f7f6;
    --bg-surface: #ffffff;
    --bg-surface-elevated: #e8f0ee;
    --bg-glass: rgba(255, 255, 255, 0.85);
    --bg-glass-card: rgba(255, 255, 255, 0.88);
    --bg-glass-hover: #ffffff;
    --border-glass: rgba(170, 130, 10, 0.24);
    --border-subtle: rgba(15, 31, 35, 0.08);

    --text-primary: #0b1f23;
    --text-secondary: #2c4448;
    --text-muted: #567175;
    --text-inverse: #f8fafc;

    --gold-primary: #b8860b;
    --gold-light: #855f00;
    --teal-accent: #0d9488;
    --teal-deep: #115e59;

    --gradient-gold: linear-gradient(135deg, #b38600 0%, #d4af37 60%, #855f00 100%);
    --gradient-hero: radial-gradient(circle at 50% 20%, rgba(212, 175, 55, 0.16) 0%, rgba(31, 122, 99, 0.10) 50%, transparent 80%);
    --shadow-glass: 0 8px 30px 0 rgba(11, 31, 35, 0.08);
    --shadow-card: 0 4px 18px -2px rgba(11, 31, 35, 0.09);
}