/* ============================================================
   tokens.css — Design Tokens (Single Source of Truth)
   I&M Construction Company
   Brand: Royal Blue (#1E40AF) · Corporate & Trustworthy
============================================================ */

:root {
  /* ── BRAND COLORS ── */
  --navy:          #0A1628;   /* Deep Navy — hero/about/contact bg */
  --royal:         #1E40AF;   /* Royal Blue — primary brand */
  --royal-mid:     #2563EB;   /* Mid blue — hover states */
  --royal-light:   #3B82F6;   /* Light blue — accents, links */
  --sky:           #DBEAFE;   /* Sky blue — subtle tints */

  /* ── NEUTRALS ── */
  --white:         #FFFFFF;
  --off-white:     #F8FAFC;   /* Services/Testimonials bg */
  --grey-100:      #F1F5F9;
  --grey-200:      #E2E8F0;   /* Card borders */
  --grey-400:      #94A3B8;   /* Muted text */
  --grey-600:      #475569;   /* Body text */
  --grey-900:      #0F172A;   /* Footer bg */

  /* ── ACCENT ── */
  --accent:        #F59E0B;   /* Amber — star ratings only */
  --accent-light:  #FCD34D;

  /* ── SUCCESS ── */
  --green:         #1a7f45;

  /* ── TYPOGRAPHY ── */
  --font-display:  'Cormorant Garamond', Georgia, serif;
  --font-ui:       'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body:     'Barlow', Arial, sans-serif;

  /* ── SPACING ── */
  --section-pad:   110px;
  --side-pad:      5%;
  --gap-md:        24px;
  --gap-lg:        48px;

  /* ── EASING ── */
  --ease-expo:     cubic-bezier(.16, 1, .3, 1);
  --ease-out:      cubic-bezier(0, 0, .2, 1);
  --ease-in-out:   cubic-bezier(.4, 0, .2, 1);

  /* ── SHADOWS ── */
  --shadow-card:   0 4px 24px rgba(30, 64, 175, .08);
  --shadow-hover:  0 28px 60px rgba(30, 64, 175, .16);
  --shadow-royal:  0 20px 50px rgba(30, 64, 175, .55);

  /* ── BORDER RADIUS ── */
  --radius-sm:     4px;
  --radius-md:     8px;

  /* ── TRANSITIONS ── */
  --trans-fast:    .2s ease;
  --trans-med:     .35s var(--ease-expo);
  --trans-slow:    .7s var(--ease-expo);
}