/* =========================================
   root.css - Variables and Design System
   Client: Jawed Habib
   ========================================= */

:root {
  /* --- Brand Colors (Extracted from Logo & Reference UI) --- */
  --color-primary: #C4121A;       /* Jawed Habib Signature Red */
  --color-primary-dark: #7B0409;  /* Deep Red for hover states */
  --color-accent: #C5A47E;        /* Gold/Bronze accent from Glamr reference */
  
  /* --- Base Colors --- */
  --color-white: #FFFFFF;
  --color-black: #050505;
  --color-gray-100: #F8F9FA;
  --color-gray-200: #E9ECEF;
  --color-gray-800: #212529;
  --color-gray-900: #121212;      /* Dark background for premium look */

  /* --- Theme Assignments --- */
  --bg-default: var(--color-white);
  --bg-inverse: var(--color-gray-900);
  --text-default: var(--color-gray-800);
  --text-inverse: var(--color-white);
  --text-muted: #6C757D;

  /* --- Typography Families --- */
  --font-heading: 'Playfair Display', serif; /* Elegant serif for salon vibe */
  --font-body: 'Jost', 'Poppins', sans-serif; /* Clean sans-serif for readability */

  /* --- Fluid Typography (Responsive Sizes using Clamp) --- 
     Values scale smoothly between 320px (mobile) and 1200px (desktop) */
  --text-xs: clamp(0.75rem, 0.71rem + 0.18vw, 0.875rem); /* 12px - 14px */
  --text-sm: clamp(0.875rem, 0.83rem + 0.22vw, 1rem);    /* 14px - 16px */
  --text-base: clamp(1rem, 0.96rem + 0.22vw, 1.125rem);  /* 16px - 18px */
  --text-lg: clamp(1.125rem, 1.05rem + 0.36vw, 1.25rem); /* 18px - 20px */
  --text-xl: clamp(1.25rem, 1.14rem + 0.54vw, 1.5rem);   /* 20px - 24px */
  
  /* Fluid Heading Sizes */
  --h1-size: clamp(2.5rem, 1.6rem + 4.5vw, 5rem);        /* 40px - 80px */
  --h2-size: clamp(2rem, 1.45rem + 2.75vw, 3.5rem);      /* 32px - 56px */
  --h3-size: clamp(1.75rem, 1.38rem + 1.83vw, 2.5rem);   /* 28px - 40px */
  --h4-size: clamp(1.5rem, 1.28rem + 1.1vw, 2rem);       /* 24px - 32px */
  --h5-size: clamp(1.25rem, 1.14rem + 0.55vw, 1.5rem);   /* 20px - 24px */
  --h6-size: clamp(1.125rem, 1.05rem + 0.36vw, 1.25rem); /* 18px - 20px */

  /* --- Spacing System --- */
  --space-3xs: clamp(0.25rem, 0.23rem + 0.09vw, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.46rem + 0.18vw, 0.625rem);
  --space-xs: clamp(0.75rem, 0.69rem + 0.27vw, 0.9375rem);
  --space-s: clamp(1rem, 0.93rem + 0.36vw, 1.25rem);
  --space-m: clamp(1.5rem, 1.39rem + 0.54vw, 1.875rem);
  --space-l: clamp(2rem, 1.86rem + 0.71vw, 2.5rem);
  --space-xl: clamp(3rem, 2.79rem + 1.07vw, 3.75rem);
  --space-2xl: clamp(4rem, 3.71rem + 1.43vw, 5rem);
  --space-3xl: clamp(6rem, 5.57rem + 2.14vw, 7.5rem);

  /* --- Borders & Radius --- */
  --border-width: 1px;
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;
  --border-radius-pill: 50px;
  --border-radius-circle: 50%;

  /* --- Layout & Containers --- */
  --container-max-width: 1320px;
  --container-padding: var(--space-m);
  
  /* --- Transitions --- */
  --transition-fast: 0.2s ease-in-out;
  --transition-normal: 0.3s ease-in-out;
  --transition-slow: 0.5s ease-in-out;
}