/* ============================================
   PRIEM CLUB - Design Tokens
   Source: Design/design-tokens.json
   ============================================ */

:root {
    /* Primary Colors */
    --color-primary: #6366f1;
    --color-primary-hover: #4f46e5;
    --color-primary-purple: #8b5cf6;
    --color-primary-light: #ddd6fe;
    --color-primary-ultra-light: #e0e7ff;

    /* Background Colors */
    --color-bg-primary: #f8f9fe;
    --color-bg-card: #ffffff;
    --color-bg-secondary: #f1f5f9;

    /* Text Colors */
    --color-text-primary: #1a1d2e;
    --color-text-secondary: #64748b;
    --color-text-tertiary: #cbd5e1;

    /* System Colors */
    --color-success: #10b981;
    --color-emerald: #34d399;
    --color-error: #ef4444;
    --color-rose: #f43f5e;
    --color-warning: #f59e0b;

    /* Border Colors */
    --color-border: #e0e7ff;
    --color-border-light: #f1f5f9;

    /* Dark Theme (Call Screens) */
    --color-dark-bg: #020617;
    --color-dark-surface: #1e293b;
    --color-dark-border: #334155;
    --color-dark-text: #94a3b8;

    /* Spacing Scale (4px base) */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-base: 16px;
    --space-lg: 20px;
    --space-xl: 24px;
    --space-2xl: 32px;
    --space-3xl: 48px;
    --space-4xl: 64px;
    --space-5xl: 80px;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-3xl: 32px;
    --radius-full: 9999px;

    /* Shadows (indigo-tinted) */
    --shadow-card: 0 2px 8px rgba(99, 102, 241, 0.05);
    --shadow-elevated: 0 4px 16px rgba(99, 102, 241, 0.1);
    --shadow-strong: 0 8px 32px rgba(99, 102, 241, 0.2);
    --shadow-button: 0 10px 25px rgba(99, 102, 241, 0.3);
    --shadow-button-hover: 0 15px 35px rgba(99, 102, 241, 0.4);
    --shadow-call: 0 8px 24px rgba(16, 185, 129, 0.4);
    --shadow-end-call: 0 8px 24px rgba(239, 68, 68, 0.4);
    --shadow-online: 0 0 8px rgba(52, 211, 153, 0.5);

    /* Typography */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-black: 900;

    /* Font Sizes */
    --fs-micro: 10px;
    --fs-xs: 11px;
    --fs-sm: 12px;
    --fs-base: 14px;
    --fs-md: 15px;
    --fs-lg: 16px;
    --fs-xl: 18px;
    --fs-2xl: 20px;
    --fs-3xl: 24px;
    --fs-4xl: 30px;
    --fs-5xl: 36px;
    --fs-6xl: 48px;

    /* Letter Spacing */
    --ls-tight: -0.02em;
    --ls-normal: 0em;
    --ls-wide: 0.2em;
    --ls-wider: 0.3em;
    --ls-widest: 0.4em;

    /* Line Heights */
    --lh-tight: 1.1;
    --lh-snug: 1.2;
    --lh-normal: 1.3;
    --lh-relaxed: 1.4;
    --lh-loose: 1.5;

    /* Sizing */
    --icon-sm: 16px;
    --icon-md: 20px;
    --icon-base: 24px;
    --icon-lg: 32px;

    --avatar-sm: 32px;
    --avatar-md: 48px;
    --avatar-lg: 64px;
    --avatar-xl: 96px;
    --avatar-2xl: 128px;

    --btn-sm: 32px;
    --btn-md: 40px;
    --btn-lg: 48px;
    --btn-xl: 56px;
    --btn-call: 72px;

    --container-max: 428px;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #6366f1, #8b5cf6);
    --gradient-avatar: linear-gradient(135deg, #e0e7ff, #ddd6fe);
    --gradient-success: linear-gradient(135deg, #10b981, #34d399);

    /* Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-blur: blur(20px);
    --glass-border: 1px solid rgba(255, 255, 255, 0.2);

    /* Transitions */
    --transition-fast: all 0.2s ease;
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}