/* Get Your Marriage On design tokens — imported from design_system/tokens/*.
   Nightstand inherits the GYMO design system (nightstand.md §3). Every color, font,
   radius and spacing value in storefront CSS must reference one of these custom
   properties — never a raw hex / font stack / pixel value. */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Montserrat:ital,wght@0,300..800;1,300..800&family=Nanum+Pen+Script&display=swap');

:root {
  /* Brand core (2025 rebrand) */
  --gymo-navy: #0E0E51;
  --gymo-blue: #2772AA;
  --gymo-blue-light: #6DB0D7;
  --gymo-blue-pale: #E1EEF8;
  --gymo-tan: #D6BAA6;
  --gymo-greige: #E7DED5;
  --gymo-cream: #F2EAE2;
  --gymo-offwhite: #F6F3F0;
  --gymo-pink: #F4D9D9;
  --gymo-blush: #FFF0EF;
  --gymo-white: #FFFFFF;
  --gymo-legacy-maroon: #B11E55;

  /* Semantic aliases */
  --text-heading: var(--gymo-navy);
  --text-body: #2B2B33;
  --text-muted: #6B6B76;
  --text-on-dark: #FFFFFF;
  --text-link: var(--gymo-blue);
  --surface-page: var(--gymo-offwhite);
  --surface-card: var(--gymo-white);
  --surface-tint-blue: var(--gymo-blue-pale);
  --surface-tint-warm: var(--gymo-cream);
  --surface-dark: var(--gymo-navy);
  --border-subtle: #E3DDD5;
  --accent-primary: var(--gymo-blue);
  --focus-ring: rgba(39, 114, 170, .45);

  /* Type */
  --font-display: "DM Serif Display", Georgia, serif;
  --font-body: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-script: "Nanum Pen Script", cursive;
  --text-h1: 48px;
  --text-h2: 36px;
  --text-h3: 26px;
  --text-h4: 20px;
  --text-h5: 16px;
  --text-body-size: 16px;
  --text-body-lg: 20px;
  --leading-tight: 1.1;
  --leading-heading: 1.2;
  --leading-body: 1.6;
  --tracking-eyebrow: .18em;
  --weight-body: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-xbold: 800;

  /* Spacing + shape */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-card: 0 8px 30px rgba(14, 14, 81, .08);
  --shadow-card-hover: 0 12px 40px rgba(14, 14, 81, .14);
  --shadow-modal: 0 24px 80px rgba(14, 14, 81, .25);
  --content-max: 1140px;
}