/* =====================================================
   PALACE - CSS VARIABLES
   =====================================================
   Easy to update branding - just change these values!
   ===================================================== */

:root {
  /* ===== PRIMARY COLORS ===== */
  /* Change these when branding is finalized */
  --color-primary: #6366f1;           /* Indigo - main brand color */
  --color-primary-light: #818cf8;
  --color-primary-dark: #4f46e5;
  
  --color-secondary: #8b5cf6;         /* Purple - accent */
  --color-secondary-light: #a78bfa;
  --color-secondary-dark: #7c3aed;
  
  --color-accent: #ec4899;            /* Pink - highlights */
  --color-accent-light: #f472b6;
  --color-accent-dark: #db2777;

  /* ===== BACKGROUND COLORS ===== */
  --color-bg: #0a0a1a;                /* Deep dark blue */
  --color-bg-secondary: #0f0f23;
  --color-surface: #1a1a2e;           /* Card backgrounds */
  --color-surface-hover: #252542;
  --color-surface-border: #2a2a4a;

  /* ===== TEXT COLORS ===== */
  --color-text: #ffffff;
  --color-text-secondary: #e0e0f0;
  --color-text-muted: #a0a0b8;
  --color-text-dim: #6b6b8a;

  /* ===== GRADIENTS ===== */
  --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  --gradient-accent: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-accent) 100%);
  --gradient-hero: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-secondary) 50%, var(--color-surface) 100%);
  --gradient-card: linear-gradient(145deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%);
  
  /* ===== GLASSMORPHISM ===== */
  --glass-bg: rgba(26, 26, 46, 0.7);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-blur: blur(20px);

  /* ===== SHADOWS ===== */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 40px rgba(99, 102, 241, 0.3);
  --shadow-glow-accent: 0 0 40px rgba(236, 72, 153, 0.3);
  --shadow-inner-glow: inset 0 0 20px rgba(99, 102, 241, 0.1);

  /* ===== TYPOGRAPHY ===== */
  /* Change these when branding is finalized */
  --font-display: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* ===== FONT SIZES ===== */
  --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 */

  /* ===== SPACING ===== */
  --space-1: 0.25rem;     /* 4px */
  --space-2: 0.5rem;      /* 8px */
  --space-3: 0.75rem;     /* 12px */
  --space-4: 1rem;        /* 16px */
  --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 */

  /* ===== BORDER RADIUS ===== */
  --radius-sm: 0.375rem;  /* 6px */
  --radius-md: 0.5rem;    /* 8px */
  --radius-lg: 0.75rem;   /* 12px */
  --radius-xl: 1rem;      /* 16px */
  --radius-2xl: 1.5rem;   /* 24px */
  --radius-full: 9999px;

  /* ===== TRANSITIONS ===== */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
  --transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ===== Z-INDEX ===== */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal: 400;
  --z-tooltip: 500;

  /* ===== LAYOUT ===== */
  --max-width: 1200px;
  --header-height: 72px;
}

/* ===== PLATFORM COLORS ===== */
:root {
  --color-android: #3ddc84;
  --color-ios: #007aff;
  --color-windows: #0078d4;
  --color-macos: #000000;
  --color-linux: #fcc624;
}