/* ==========================================================================
   FREEDOM KITCHENS & BATHS — Design System Variables
   css/variables.css
   ========================================================================== */

:root {

  /* --------------------------------------------------------------------------
     BRAND COLORS — Raw Palette
     -------------------------------------------------------------------------- */
  --navy:        #1B3A5C;
  --gold:        #D4A94D;
  --gold-dark:   #B8912F;  /* hover state for gold */
  --gold-light:  #E8C876;  /* subtle tint */
  --slate-blue:  #3D5A80;
  --warm-gray:   #6B7B8D;
  --charcoal:    #2D2D2D;
  --light-gray:  #F2F4F6;
  --white:       #FFFFFF;
  --border:      #DDDDDD;

  /* --------------------------------------------------------------------------
     SEMANTIC COLOR MAPPINGS
     -------------------------------------------------------------------------- */
  --color-primary:          var(--navy);
  --color-primary-hover:    var(--slate-blue);
  --color-accent:           var(--gold);
  --color-accent-hover:     var(--gold-dark);
  --color-accent-light:     var(--gold-light);
  --color-secondary:        var(--slate-blue);
  --color-text:             var(--charcoal);
  --color-text-muted:       var(--warm-gray);
  --color-text-inverse:     var(--white);
  --color-bg:               var(--white);
  --color-bg-alt:           var(--light-gray);
  --color-bg-dark:          var(--charcoal);
  --color-border:           var(--border);
  --color-error:            #DC3545;
  --color-success:          #198754;

  /* --------------------------------------------------------------------------
     TYPOGRAPHY — Font Families
     -------------------------------------------------------------------------- */
  --font-heading:  'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body:     'Poppins', 'Helvetica Neue', Arial, sans-serif;

  /* --------------------------------------------------------------------------
     TYPOGRAPHY — Font Weights
     -------------------------------------------------------------------------- */
  --font-weight-regular:    400;
  --font-weight-medium:     500;
  --font-weight-semibold:   600;
  --font-weight-bold:       700;
  --font-weight-extrabold:  800;

  /* --------------------------------------------------------------------------
     TYPOGRAPHY — Fluid Font Sizes (clamp: min, preferred, max)
     -------------------------------------------------------------------------- */
  --font-size-hero:   clamp(2.5rem, 6vw, 4rem);     /* Hero headline */
  --font-size-h1:     clamp(2rem, 4vw, 3rem);        /* Page H1 */
  --font-size-h2:     clamp(1.5rem, 3vw, 2.25rem);   /* Section headings */
  --font-size-h3:     clamp(1.25rem, 2.5vw, 1.5rem); /* Card / sub-headings */
  --font-size-h4:     1.125rem;                       /* Minor headings */
  --font-size-body:   1rem;                           /* Base body text */
  --font-size-small:  0.875rem;                       /* Captions, labels */
  --font-size-xs:     0.75rem;                        /* Tags, badges, overlines */

  /* --------------------------------------------------------------------------
     LINE HEIGHTS
     -------------------------------------------------------------------------- */
  --line-height-tight:   1.2;   /* Headings */
  --line-height-snug:    1.4;   /* Sub-headings */
  --line-height-normal:  1.6;   /* Body text */
  --line-height-relaxed: 1.75;  /* Long-form content */

  /* --------------------------------------------------------------------------
     LETTER SPACING
     -------------------------------------------------------------------------- */
  --letter-spacing-tight:  -0.01em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide:   0.05em;
  --letter-spacing-widest: 0.15em;  /* Section tags / overlines */

  /* --------------------------------------------------------------------------
     SPACING SCALE
     -------------------------------------------------------------------------- */
  --space-xs:   0.5rem;   /*  8px */
  --space-sm:   1rem;     /* 16px */
  --space-md:   1.5rem;   /* 24px */
  --space-lg:   3rem;     /* 48px */
  --space-xl:   5rem;     /* 80px */
  --space-2xl:  8rem;     /* 128px */

  /* --------------------------------------------------------------------------
     LAYOUT
     -------------------------------------------------------------------------- */
  --max-width:         1200px;
  --container-padding: 1.5rem;
  --header-height:     72px;

  /* --------------------------------------------------------------------------
     BORDER RADIUS
     -------------------------------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* --------------------------------------------------------------------------
     SHADOWS
     -------------------------------------------------------------------------- */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.06);
  --shadow-lg:  0 12px 40px rgba(0, 0, 0, 0.14), 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-xl:  0 24px 60px rgba(0, 0, 0, 0.16), 0 8px 20px rgba(0, 0, 0, 0.10);

  /* --------------------------------------------------------------------------
     TRANSITIONS
     -------------------------------------------------------------------------- */
  --transition:        0.3s ease;
  --transition-fast:   0.15s ease;
  --transition-slow:   0.5s ease;

  /* --------------------------------------------------------------------------
     Z-INDEX SCALE
     -------------------------------------------------------------------------- */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 50;
  --z-header:  100;
  --z-modal:  1000;
  --z-toast:  1100;

}

/* Reduce container padding on very small screens */
@media (max-width: 480px) {
  :root {
    --container-padding: 1rem;
    --space-xl: 4rem;
    --space-lg: 2.5rem;
  }
}