/**
 * OnlyStudio - CSS Variables
 * Sistem centralizat de variabile pentru culori, spacing, typography, shadows
 */

:root {
  /* Brand Colors */
  --color-gold: #dec05c;
  --color-gold-light: #f0d98a;
  --color-whatsapp: #25D366;
  --color-whatsapp-dark: #128C7E;
  
  /* Neutrals */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-dark: rgba(0, 0, 0, 0.95);
  --color-surface: #111111;
  --color-surface-2: #161616;
  
  /* Opacity Variants - Gold */
  --color-gold-10: rgba(222, 192, 92, 0.1);
  --color-gold-12: rgba(222, 192, 92, 0.12);
  --color-gold-20: rgba(222, 192, 92, 0.2);
  --color-gold-25: rgba(222, 192, 92, 0.25);
  --color-gold-30: rgba(222, 192, 92, 0.3);
  --color-gold-40: rgba(222, 192, 92, 0.4);
  --color-gold-45: rgba(222, 192, 92, 0.45);
  --color-gold-70: rgba(222, 192, 92, 0.7);
  --color-gold-100: rgba(222, 192, 92, 1);
  
  /* Opacity Variants - White */
  --color-white-10: rgba(255, 255, 255, 0.1);
  --color-white-20: rgba(255, 255, 255, 0.2);
  --color-white-55: rgba(255, 255, 255, 0.55);
  --color-white-60: rgba(255, 255, 255, 0.6);
  --color-white-75: rgba(255, 255, 255, 0.75);
  --color-white-100: rgba(255, 255, 255, 1);
  
  /* Typography */
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --text-sm: 12px;
  --text-base: 13px;
  --text-md: 14px;
  --text-xl: 16px;
  --text-3xl: 22px;
  --text-4xl: 26px;
  --text-5xl: 28px;
  --text-6xl: 32px;
  
  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  
  --space-px-10: 10px;
  --space-px-14: 14px;
  --space-px-16: 16px;
  --space-px-20: 20px;
  --space-px-28: 28px;

  /* Layout */
  --columns-width: 1140px;

  /* Font Weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  
  /* Letter Spacing */
  --tracking-tight: 0.04em;
  --tracking-normal: 0.08em;
  --tracking-wide: 0.15em;
  
  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.15;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;
  --leading-loose: 1.7;
  
  /* Border Radius */
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 50px;
  --radius-circle: 50%;
  
  /* Shadows */
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
  
  /* Borders */
  --border-width: 1px;
  
  /* Transitions */
  --duration-normal: 0.25s;
  --duration-slow: 0.3s;
  --duration-slower: 0.8s;
  --ease-in-out: ease-in-out;
  --ease-both: ease both;
  --transition-all: all var(--duration-normal) var(--ease-in-out);
  
  /* Z-Index */
  --z-base: 1;
  --z-dropdown: 10;
  --z-fixed: 1000;

  /* ═══════════════════════════════════════════════════════
     ALIASURI pentru compatibilitate cu homepage CSS
     ═══════════════════════════════════════════════════════ */

  /* Aliasuri culori principale */
  --gold: var(--color-gold);
  --gold-border: rgba(222, 192, 92, 0.25);
  --gold-dim: rgba(222, 192, 92, 0.3);
  --gold-faint: rgba(222, 192, 92, 0.1);

  /* Aliasuri surface */
  --surface: var(--color-surface);
  --surface-2: var(--color-surface-2);

  /* Aliasuri white */
  --white-55: var(--color-white-55);
  --white-75: var(--color-white-75);
}