/* =============================================
   Kuaförim App - CSS Variables & Theme
   ============================================= */
:root {
  /* Brand Colors - Gold & Black */
  --primary: #D4A017;
  --primary-dark: #B8860B;
  --primary-light: #F0C75E;
  --secondary: #C9A84C;
  --accent: #FFD700;

  /* Gold Shades */
  --gold: #D4A017;
  --gold-light: #F0C75E;
  --gold-dark: #B8860B;
  --gold-muted: rgba(212, 160, 23, 0.3);
  --gold-subtle: rgba(212, 160, 23, 0.1);

  /* Neutrals - Deep Black */
  --bg-dark: #000000;
  --bg-card: #0A0A0A;
  --bg-surface: #111111;
  --bg-elevated: #1A1A1A;
  --bg-input: #1E1E1E;
  --border-color: #2A2A2A;
  --border-light: #333333;

  /* Text */
  --text-primary: #FFFFFF;
  --text-secondary: #C0C0C0;
  --text-muted: #888888;
  --text-inverse: #000000;
  --text-gold: #D4A017;

  /* Status */
  --success: #4CAF50;
  --danger: #E53935;
  --warning: #FFB300;
  --info: #29B6F6;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;

  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-xs: 11px;
  --font-sm: 13px;
  --font-md: 15px;
  --font-lg: 18px;
  --font-xl: 22px;
  --font-xxl: 28px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);

  /* Layout */
  --navbar-height: 56px;
  --tabbar-height: 60px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --max-width: 480px;

  /* Z-index */
  --z-base: 1;
  --z-sticky: 100;
  --z-navbar: 500;
  --z-modal: 1000;
  --z-toast: 2000;
  --z-overlay: 3000;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}