/* Design tokens — single source of truth for all design values.
   Populated per-site from the Figma design system at project start
   (the one permitted Stage-1 MCP task — see CLAUDE.md).
   RULE: no hex codes or magic numbers anywhere else in the CSS. */

@font-face {
  font-family: "Inter";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/inter-light.ttf") format("truetype");
}
@font-face {
  font-family: "Inter";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/inter-regular.ttf") format("truetype");
}
@font-face {
  font-family: "Inter";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/inter-medium.ttf") format("truetype");
}
@font-face {
  font-family: "Inter";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/inter-semibold.ttf") format("truetype");
}

@font-face {
  font-family: "Inria Serif";
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("../fonts/inria-serif-italic.ttf") format("truetype");
}

@font-face {
  font-family: "Inria Serif";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/inria-serif-bold.ttf") format("truetype");
}

@font-face {
  font-family: "Inria Serif";
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  src: url("../fonts/inria-serif-bolditalic.ttf") format("truetype");
}

:root {
  /* Colours */
  --color-bg-warm:       #F9F4EF;
  --color-bg-white:      #FFFFFF;
  --color-bg-teal:       #05757F;
  --color-text-body:     #59595B;
  --color-text-teal:     #05757F;
  --color-text-white:    #FFFFFF;
  --color-text-field:    #666666;
  --color-accent:        #9E0442;
  --color-icon:          #0E98A4;
  --color-keyline:       #E1C8B0;
  --color-bg-field:      #f2f2f2;
  --color-text-placeholder: #6d6d6d;

  /* Typography — families */
  --font-serif:          "Inria Serif", serif;
  --font-sans:           "Inter", sans-serif;

  /* Typography — weights */
  --weight-light:        300;
  --weight-regular:      400;
  --weight-medium:       500;
  --weight-semibold:     600;
  --weight-bold:         700;

  /* Typography — sizes (font-size / line-height) */
  --text-h1:             64px;
  --lh-h1:               78px;
  --text-h2:             32px;
  --lh-h2:               47px;
  --text-h3:             32px;
  --lh-h3:               47px;
  --text-lead:           32px;
  --lh-lead:             47px;
  --text-body:           20px;
  --lh-body:             37px;
  --text-small:          16px;
  --lh-small:            26px;
  --text-nav:            16px;
  --text-tiny:           12px;
  --lh-tiny:             18px;
  --lh-nav:              normal;

  /* Spacing */
  --space-section:       86px;
  --space-card:          54px;
  --space-margin:        clamp(60px, calc(60px + (100vw - 1024px) * 34 / 286), 94px);
  --space-gutter:        20px;
  --space-nav:           36px;
  --space-hero-gap:      46px;
  --space-button-gap:    30px;
  --space-button-v:      14px;
  --space-button-h:      30px;
  --space-icon-gap:      7px;
  --space-gradient-h:    666px;
  --space-margin-mobile: 40px;
  --space-margin-tablet: 60px;
  --space-heading-gap:   35px;
  --space-paragraph:   24px;

  /* Grid */
  --grid-columns:        12;
  --grid-column-w:       86px;

  /* Radius */
  --radius-box:          30px;
  --radius-button:       9px;
}

@media (max-width: 768px) {
  :root {
    --text-lead: 22px;
    --lh-lead: 38px;
    --text-body: 17px;
    --lh-body: 34px;
    --text-h2: 22px;
    --lh-h2: 30px;
    --space-section: 48px;
    --space-margin: var(--space-margin-mobile);
  }
}