/*
 * Design tokens for the Eco Route Advisory site.
 * Source: Figma "compressed-website---dev", frame "Desktop" (node 4:46).
 * Colour names marked (var) are Figma variables; the rest are raw fills from the frame.
 */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/manrope-latin.756049f32875.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/manrope-latin-ext.00e470bb0ba2.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Colour */
  --color-dark: #3a3a46;          /* Dark (var) */
  --color-light: #f5f5f5;         /* Light (var) */
  --color-green: #aae9d6;         /* Green (var) */
  --color-accent: #71ccb2;        /* headings, active nav, icons */
  --color-white: #ffffff;
  --color-surface-raised: rgb(255 255 255 / 0.05); /* value cards on dark */
  --color-text-muted-inverse: rgb(255 255 255 / 0.6); /* form placeholders on dark */
  --color-error: #ffb4a8;         /* form errors on dark (≈8:1 on --color-dark) */

  --color-text: var(--color-dark);
  --color-text-inverse: var(--color-white);
  --color-focus: var(--color-green);

  /* Typography */
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --font-size-xs: 0.75rem;     /* 12px – footer separators */
  --font-size-body: 1rem;      /* 16px */
  --font-size-lead: 1.5rem;    /* 24px – hero subtitle */
  --font-size-h3: 2rem;        /* 32px – value card titles */
  --font-size-h2: clamp(2rem, 1.5rem + 2vw, 2.75rem);   /* 32 → 44px */
  --font-size-h1: clamp(2.5rem, 1.6rem + 3.6vw, 4rem);  /* 40 → 64px */
  --font-size-page-title: clamp(2.25rem, 1.8rem + 1.6vw, 3rem); /* 36 → 48px – inner page banner */
  --font-size-small: 0.875rem; /* 14px – form fields, contact subtitle */
  --font-size-card-title: clamp(1.625rem, 1.4rem + 0.8vw, 2rem); /* 26 → 32px – contact card */

  --line-height-tight: 1.05;
  --line-height-normal: 1.366; /* Manrope "normal" line height used in Figma */
  --line-height-body: 1.5;

  /* Spacing (px values at 16px root) */
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 2.5rem;   /* 40 */
  --space-8: 3rem;     /* 48 */
  --space-9: 3.5rem;   /* 56 */
  --space-10: 4rem;    /* 64 */
  --space-11: 5rem;    /* 80 */

  --gutter: clamp(var(--space-4), 5.5vw, var(--space-11)); /* 16 → 80px page gutter */

  /* Content width. Full-width blocks keep their background edge to edge, but their
     side padding grows on wide screens so the content stays within --content-max.
     100% resolves against the element using these tokens (the viewport-wide block). */
  --content-max: 80rem; /* 1280px */
  --content-inset: calc((100% - var(--content-max)) / 2);
  --page-inline: max(var(--gutter), var(--content-inset));

  /* Sizing */
  --measure-wide: 42rem;     /* ~675px section headings */
  --measure: 34.5rem;        /* ~553px section intros */
  --measure-narrow: 30rem;   /* ~482px values intro */
  --measure-xwide: 49.3rem;  /* 789px about intro */
  --measure-cta: 40rem;      /* 641px about closing paragraph */
  --measure-founder: 46rem;  /* 737px founder bio */
  --page-title-width: 38rem; /* 608px */
  /* Inner page banner: Figma 294px tall, title 137px from top / 107px from bottom at 1440px */
  --banner-pad-top: clamp(var(--space-8), 9.5vw, 8.5625rem);
  --banner-pad-bottom: clamp(var(--space-8), 7.43vw, 6.6875rem);
  --card-min-height-service: 23.7rem;  /* 379px about service cards */
  --portrait-size: 19.375rem;          /* 310px founder photo */
  --contact-card-width: 38.125rem;     /* 610px */
  --contact-card-pad-inline: clamp(var(--space-5), 3vw, 2.6875rem); /* 24 → 43px */
  --contact-pad-block: clamp(var(--space-8), 5.3vw, 4.75rem);       /* 48 → 76px above/below card */
  --contact-logo-width: 10.625rem;     /* 170px (crops the logo's left padding) */
  --contact-logo-height: 3.75rem;      /* 60px */
  --message-min-height: 13.4375rem;    /* 215px */
  --hero-text-width: 37.5rem; /* 600px */
  --hero-image-width: 44rem;  /* 706px */
  --hero-min-height: 42rem;   /* 675px visible hero at desktop */
  --capability-width: 21rem;  /* 336px */
  --card-min-height: 24.7rem; /* 395px */
  --icon-capability-height: 5.8rem; /* 93px – tallest capability icon */
  --logo-header-width: 11.5rem;     /* 184px */
  --logo-footer-width: 7.625rem;    /* 122px */
  --bar-height: 3.125rem;           /* 50px announcement bar */
  --header-height: 5.4375rem;       /* 87px */
  --sticky-offset: calc(var(--header-height) + var(--bar-height)); /* 137px sticky header + bar */
  --sticky-offset-sm: 13.25rem;     /* ~212px: header and bar wrap onto extra lines below 640px */

  /* Stacking */
  --z-sticky: 20;
  --z-skip-link: 30;

  /* Radii & borders */
  --radius-card: 20px;
  --radius-pill: 30px;
  --pill-height: 1.875rem; /* 30px – buttons and choice pills */
  --radius-field: 10px;
  --border-width: 1px;
  --focus-ring-width: 2px;
  --focus-ring-offset: 3px;

  /* Breakpoints (reference only – custom properties can't be used in @media):
     sm 640px · md 768px · lg 1200px */
}