/* ==========================================================================
   Design Tokens — Art Alejandro Remodeling
   ========================================================================== */

:root {
  /* ── Colors ── */
  --color-navy:        #203a63;
  --color-charcoal:    #314a6d;
  --color-orange:      #c94f14;
  --color-orange-dark: #a94312;
  --color-orange-light:#e8601c;
  --color-tile-bg:     #3f6798;
  --color-tile-bg-soft:#4a77aa;
  --color-tile-text:   #ffffff;
  --color-tile-muted:  #ffffff;
  --color-white:       #ffffff;
  --color-light-gray:  #f5f5f5;
  --color-medium-gray: #cccccc;
  --color-dark-gray:   #666666;

  /* Semantic aliases */
  --color-primary:     var(--color-orange);
  --color-bg:          var(--color-white);
  --color-bg-alt:      var(--color-light-gray);
  --color-text:        var(--color-charcoal);
  --color-text-light:  var(--color-dark-gray);
  --color-heading:     var(--color-navy);

  /* ── Typography ── */
  --font-family-base:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;

  /* Type scale (modular, ~1.25 ratio) */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */
  --text-5xl:  3rem;      /* 48px */

  /* Line heights */
  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* Font weights */
  --font-normal:    400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;

  /* ── Spacing (4px base) ── */
  --space-1:  0.25rem;  /*  4px */
  --space-2:  0.5rem;   /*  8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* ── Layout ── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-max: 1200px;

  /* ── Borders & Radius ── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 4px 6px rgba(0, 0, 0, 0.08);
  --shadow-lg:  0 10px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl:  0 20px 40px rgba(0, 0, 0, 0.16);

  /* ── Transitions ── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
}