/*
  tokens.css
  Generated from Penpot design tokens (tokens.json / "light" theme).
  This file is the single source of truth for color, type, radius and
  layout values across the site. Every page should import this file
  and use these variables instead of hardcoded hex/px values.

  Do not edit values here without updating the Penpot source and
  re-exporting — this file should always mirror the design file.
*/

:root {
  /* ---------------------------------------------------------------- */
  /* Color                                                             */
  /* ---------------------------------------------------------------- */
  --color-white: #ffffff;
  --color-light: #eaf2f4;

  --color-primary: #e74673;     /* primary brand / accent color */
  --color-primary-2: #172463;   /* secondary / dark navy */
  --color-primary-3: #1cb4c8;   /* tertiary / teal accent */
  --color-2: #ffee7d;           /* highlight / yellow accent */

  --color-1: #d3d3d5;           /* input backgrounds, borders */

  --text-color-1: #787878;      /* secondary / muted text */
  --text-color-2: #363636;      /* primary body text */

  /* ---------------------------------------------------------------- */
  /* Typography                                                        */
  /* ---------------------------------------------------------------- */
  --font-primary: 'Maven Pro', sans-serif;
  --font-accent: 'Unna', serif;   /* used for quotes and accents only */

  --font-size-h1: 56px;
  --font-size-h2: 48px;
  --font-size-h3: 32px;
  --font-size-h4: 28px;
  --font-size-h5: 20px;
  --font-size-h6: 17px;

  --font-size-body-lead: 18px;   /* hero paragraph */
  --font-size-body-main: 16px;

  --font-size-button-1: 16px;
  --font-size-button-2: 14px;

  --font-size-eyebrow: 14px;
  --font-size-accent: 18px;
  --font-size-meta: 12px;

  /* ---------------------------------------------------------------- */
  /* Radius                                                            */
  /* ---------------------------------------------------------------- */
  --radius-image: 25px;
  --radius-button: 25px;

  /* ---------------------------------------------------------------- */
  /* Layout                                                            */
  /* ---------------------------------------------------------------- */
  --canvas-width: 1400px;   /* max content width, use as max-width on wrappers */
}

/*
  Responsive type scale.
  No mobile/tablet frames exist in the Penpot file, so these values are
  a derived scale (not pulled from design) — proportionally reduced from
  the desktop sizes above, keeping the same visual hierarchy. Body,
  button, and meta text are floored at 16px/14px/12px respectively for
  legibility and to avoid iOS auto-zoom on form fields under 16px.

  If mobile/tablet frames are added to Penpot later, replace these
  values with the real ones and remove this note.
*/

/* Tablet: 768px–1023px */
@media (max-width: 1023px) {
  :root {
    --font-size-h1: 44px;
    --font-size-h2: 38px;
    --font-size-h3: 28px;
    --font-size-h4: 24px;
    --font-size-h5: 19px;
    --font-size-h6: 17px;

    --font-size-body-lead: 17px;
    --font-size-body-main: 16px;

    --font-size-button-1: 16px;
    --font-size-button-2: 14px;

    --font-size-eyebrow: 13px;
    --font-size-accent: 17px;
    --font-size-meta: 12px;
  }
}

/* Mobile: below 768px */
@media (max-width: 767px) {
  :root {
    --font-size-h1: 34px;
    --font-size-h2: 28px;
    --font-size-h3: 24px;
    --font-size-h4: 20px;
    --font-size-h5: 18px;
    --font-size-h6: 16px;

    --font-size-body-lead: 16px;
    --font-size-body-main: 16px;

    --font-size-button-1: 16px;
    --font-size-button-2: 14px;

    --font-size-eyebrow: 12px;
    --font-size-accent: 16px;
    --font-size-meta: 12px;
  }
}