/*
 * JayWay v2 design tokens (Figma 0InkfTGnKQupGMyFmBmkOP, page "Design System").
 * Tokens only, no component classes. Not part of /stylesheets/all.css.
 *
 * Breakpoint widths are ours, not from Figma (we own them; Pavlo, 2026-10-15).
 * Breakpoints: Figma gives desktop/tablet/mobile values but no widths, so we use
 * Bootstrap 5's: tablet < 992px (max-width: 991.98px), mobile < 576px (max-width: 575.98px).
 * Custom properties cannot be used inside @media, so these widths are repeated below.
 */
:root {
  /* Colour (Figma: --coral etc., prefixed with color- here) */
  --color-ink: #333333;
  --color-ink-muted: #666666;
  --color-line: #dcdcdc;
  --color-line-step: #66666640;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-charcoal: #1d1d1d;
  --color-sand: #efeae6;
  --color-cream: #f9f3ee;
  --color-coral: #d3484b;
  --color-peach: #ffe3bb;
  --color-teal: #457079;
  --color-teal-deep: #284045;
  --color-on-dark-muted: #ffffffd9;
  --color-grey-light: #bdbdbd;
  --color-glass-fill: #00000040;
  --color-glass-line: #ffffff80;
  --color-image-dim: #00000033;
  --color-image-scrim: #000000cc;
  --color-ig-violet: #8401ff;
  --color-ig-orange: #ff3700;

  /* Font families. Figma uses Playfair Display as a stand-in for Saol Display,
     and Montserrat for some UI styles; the redesign uses Poppins for those. */
  --font-display: 'Saol Display', 'Playfair Display', Georgia, serif;
  --font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  /* Text styles (Figma text styles; px) */
  --text-body-size: 16px;            /* JayWay/Text/Body */
  --text-body-line: 24px;
  --text-eyebrow-size: 16px;         /* JayWay/Text/Eyebrow */
  --text-eyebrow-line: 24px;
  --text-eyebrow-tracking: 3.2px;    /* = 0.2em; uppercase */
  --text-body-sm-size: 14px;         /* JayWay/UI/Body SM */
  --text-body-sm-line: 22.75px;
  --text-step-title-size: 16px;      /* JayWay/UI/Step Title, weight 600 */
  --text-step-title-line: 28px;
  --text-footer-heading-size: 14px;  /* JayWay/UI/Footer Heading, weight 700 */
  --text-footer-heading-line: 26px;

  /* Headings. Sizes are desktop (overridden at tablet/mobile below); line heights are
     unitless ratios from the Figma samples so they scale with the size.
     H1-H3: --font-display, weight 400; H1 and H2 uppercase, H3 not. H4-H6: --font-body. */
  --h1-xl-size: 80px;  --h1-xl-line: 1.125;  /* 80/90 */
  --h1-size: 60px;     --h1-line: 1.2;       /* 60/72, Display/Section */
  --h2-size: 40px;     --h2-line: 1.31;      /* 60/78.6 sample */
  --h3-size: 40px;     --h3-line: 1.31;      /* 40/52.4 */
  --h4-size: 28px;     --h4-line: 1.5;  --h4-weight: 500;
  --h5-size: 18px;     --h5-line: 1.5;  --h5-weight: 700;
  --h6-size: 16px;     --h6-line: 1.5;  --h6-weight: 700;

  /* Link hover (Figma "Font Link Hover"): text colour -> hover colour */
  --link-hover-on-light: var(--color-ink-muted);  /* #000 or #333 -> #666 */
  --link-hover-on-dark: var(--color-grey-light);  /* #fff -> light grey, anything on a dark background (Pavlo, 2026-10-22) */

  /* Spacing */
  --space-10: 10px;
  --space-15: 15px;
  --space-20: 20px;
  --space-25: 25px;
  --space-30: 30px;
  --space-60: 60px;
  --space-section: 140px;
  --space-hero-inset: 172px;  /* Figma: --hero-inset */

  /* Radius */
  --radius-none: 0;
  --radius-sm: 5px;
  --radius-pill: 50px;

  /* Sizes (Figma: --control-hero/md/sm, --header-height) */
  --size-control-hero: 81px;
  --size-control-md: 53px;
  --size-control-sm: 44px;
  --size-header: 69px;

  /* Container */
  --container-max: 1920px;
  --container-padding: 20px;
}

@media (max-width: 991.98px) {
  :root {
    --h1-xl-size: 60px;
    --h2-size: 32px;
    --container-padding: 5px;
  }
}

@media (max-width: 575.98px) {
  :root {
    --h1-xl-size: 40px;
    --h1-size: 40px;
    --h2-size: 28px;
    --h3-size: 28px;
  }
}