/* variables.css: Design System for Hiwaga Beauty Parlour */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Playfair+Display:wght@400;500;600;700&display=swap');

:root {
  /* Colors - Soft luxury palette */
  --clr-bg: #FCFAF8; /* Soft off-white */
  --clr-white: #ffffff;
  --clr-black: #1A1A1A; /* Not pure black for softer contrast */
  --clr-nude: #F4E8DF; /* Nude accent */
  --clr-nude-dark: #E4CFC0; /* Darker nude for borders/hover */
  --clr-gold: #B89B66; /* Elegant gold */
  --clr-gold-light: #CBB484; /* Elegant gold */
  --clr-text-main: #2C2C2C;
  --clr-text-light: #5A5A5A;
  
  /* Typography */
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Inter', sans-serif;

  /* Spacing Tokens */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 80px;

  /* Font Sizes - Mobile First */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --text-3xl: 40px;
  --text-4xl: 48px;

  /* Layout */
  --container-max-width: 1200px;
  --container-padding: 20px;

  /* Styling */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;
  --border-radius-xl: 24px;
  --trans-fast: 0.2s ease;
  --trans-normal: 0.3s ease;
  --trans-slow: 0.5s ease-in-out;
  --shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.08);
}