/* ==========================================================================
   Design Tokens — extracted 1:1 from the Figma file
   "Ecom Luxx | The Morrison Center — Final UI/UX Designs"
   ========================================================================== */
:root {
  /* ---------- Colors ---------- */
  --color-white: #ffffff;
  --color-black: #000000;

  /* Brand / primary */
  --primary: #203a55;          /* primary button / brand blue            */
  --primary-navy: #1b2b38;     /* headings + dark sections + footer       */
  --accent: #285d8f;           /* eyebrow labels / accent blue            */
  --accent-green: #5e7f4f;     /* role labels on interior pages           */

  /* Text */
  --text-primary: #1b2b38;
  --text-body: #333333;
  --text-muted: #666666;
  --text-ink: #101928;         /* Grey/900 token from Figma               */

  /* Surfaces */
  --background: #ffffff;
  --surface: #ffffff;
  --surface-green: #d7e3d2;
  --surface-green-soft: #f3f7f2;
  --surface-green-30: rgba(215, 227, 210, 0.3);
  --surface-green-chip: #eaf0e7;
  --surface-blue-soft: #f2f6f9;
  --surface-grey: #f5f5f5;
  --surface-grey-2: #f7f7f7;

  /* Avatars (decorative placeholders behind cropped photos) */
  --avatar-peach: #ffe7cc;
  --avatar-mauve: #d4afbd;
  --avatar-blue: #85a7c6;

  /* Lines / borders */
  --border: #e3e3e3;
  --border-soft: rgba(0, 0, 0, 0.08);
  --border-soft-2: rgba(0, 0, 0, 0.06);
  --border-ink-05: rgba(16, 25, 40, 0.05);

  /* On-dark opacities */
  --on-dark-50: rgba(255, 255, 255, 0.5);
  --on-dark-80: rgba(255, 255, 255, 0.8);
  --on-dark-05: rgba(255, 255, 255, 0.05);

  /* Overlays */
  --overlay-hero: rgba(0, 0, 0, 0.5);

  /* ---------- Typography ---------- */
  --font-sans: "General Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-inter: "Inter", system-ui, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Type scale — desktop reference sizes (px) — headings scaled ×0.7 */
  --fs-display: 52px;          /* hero headline  (was 74px)              */
  --lh-display: 54px;
  --fs-h2: 32px;               /* section titles (was 52px)              */
  --lh-h2: 36px;
  --fs-quote: 24px;            /* big italic pull-quote (client QA 2026-07: down a touch) */
  --lh-quote: 30px;
  --fs-h3: 20px;               /* (was 32px)                             */
  --lh-h3: 26px;
  --fs-h4: 17px;               /* (was 22px)                             */
  --lh-h4: 22px;
  --fs-h5: 16px;               /* (was 20px)                             */
  --lh-h5: 22px;
  --fs-body-lg: 18px;
  --lh-body-lg: 25px;
  --fs-body: 16px;
  --lh-body: 22px;
  --fs-small: 14px;
  --lh-small: 18px;
  --fs-eyebrow: 12px;
  --lh-eyebrow: 18px;

  /* Per-level font weights (overridable by Global Typography widget) */
  --fw-display: 700;
  --fw-h2:      700;
  --fw-h3:      700;
  --fw-h4:      600;
  --fw-h5:      600;
  --fw-body-lg: 400;
  --fw-eyebrow: 500;

  /* Letter-spacing for uppercase labels */
  --ls-eyebrow: 1.44px;        /* 12px labels                            */
  --ls-eyebrow-lg: 1.68px;     /* 14px labels                            */

  /* Global alignment tokens — overridden by TMC Global Typography widget */
  --site-heading-align: center;
  --site-body-align: left;

  /* ---------- Radius ---------- */
  --radius-pill: 555px;
  --radius-card: 22px;
  --radius-badge: 40px;
  --radius-chip: 16px;
  --radius-md: 12px;
  --radius-sm: 6px;

  /* ---------- Shadows ---------- */
  --shadow-sm: 0 1px 2px rgba(16, 25, 40, 0.05);
  --shadow-md: 0 4px 16px rgba(16, 25, 40, 0.08);
  --shadow-card:
    0px 3.603px 20.719px -0.376px rgba(16, 25, 40, 0.04),
    0px 0px 0px 0.376px rgba(16, 25, 40, 0.05);
  --shadow-lg: 0 18px 50px rgba(16, 25, 40, 0.18);

  /* ---------- Spacing scale (px) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 22px;
  --space-8: 24px;
  --space-9: 28px;
  --space-10: 32px;
  --space-11: 36px;
  --space-12: 40px;
  --space-13: 46px;
  --space-14: 60px;
  --space-15: 64px;
  --space-16: 88px;
  --space-17: 100px;
  --space-18: 121px;

  /* ---------- Layout ---------- */
  --container-max: 1400px;     /* inner content width (1920 - 2*260)      */
  --page-gutter: 260px;        /* desktop horizontal frame padding        */
  --section-y: 70px;           /* desktop vertical section rhythm          */
  --header-h: 89px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 600ms;
  --dur-reveal-slow: 1000ms;

  /* ---------- Breakpoints (reference) ---------- */
  --bp-mobile-max: 767px;
  --bp-tablet-min: 768px;
  --bp-tablet-max: 1023px;
  --bp-laptop-min: 1024px;
  --bp-laptop-max: 1439px;
  --bp-desktop-min: 1440px;
  --bp-ultra-min: 1920px;
}

/* ==========================================================================
   Utility classes — layout, typography, spacing
   ========================================================================== */
.u-flex { display: flex; }
.u-flex-col { flex-direction: column; }
.u-flex-center { align-items: center; justify-content: center; }
.u-grid { display: grid; }
.u-gap-2 { gap: var(--space-2); }
.u-gap-4 { gap: var(--space-4); }
.u-gap-6 { gap: var(--space-6); }
.u-text-center { text-align: center; }
.u-text-capitalize { text-transform: capitalize; }
.u-text-uppercase { text-transform: uppercase; }
.u-fw-medium { font-weight: var(--fw-medium); }
.u-fw-semibold { font-weight: var(--fw-semibold); }
.u-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }