/*
  Design tokens: custom properties only. Source of truth: DESIGN-PLAN.md.
  Breakpoints used across the site (media queries can't read variables): 480, 768, 1024, 1280px.
*/

:root {
  /* Color §1.1 */
  --carbon: #3c3c3b;      /* brand, locked */
  --verde: #56ad31;       /* brand, locked. Logo only. */
  --brote: #97c467;       /* brand, locked */
  --cal: #F3F4EF;
  --concreto: #DCDFD6;
  --grafito: #5E5E5B;
  --surco: #2E6B17;
  --ancho: #6B2A1C;
  --alerta: #9E2A1B;
  --white: #FFFFFF;

  /* Rules and hover states on dark surfaces */
  --rule-on-dark: color-mix(in srgb, var(--cal) 24%, transparent);
  --hover-on-dark: color-mix(in srgb, var(--cal) 8%, transparent);

  /* Typeface §2.1 */
  --font-sans: "Archivo", "Arial Narrow", Arial, sans-serif;

  /* Weights */
  --w-ui: 500;
  --w-ui-active: 650;
  --w-strong: 650;

  /* Type scale §2.3: size, stretch, weight, line-height, tracking */
  --t-display-size: clamp(2.75rem, 1.55rem + 5.1vw, 6rem);
  --t-display-stretch: 68%;
  --t-display-weight: 760;
  --t-display-lh: 1.08;
  --t-display-tracking: -0.01em;

  --t-h1-size: clamp(2.5rem, 1.75rem + 3.2vw, 4.5rem);
  --t-h1-stretch: 72%;
  --t-h1-weight: 720;
  --t-h1-lh: 1.1;
  --t-h1-tracking: -0.005em;

  --t-h2-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
  --t-h2-stretch: 78%;
  --t-h2-weight: 700;
  --t-h2-lh: 1.12;
  --t-h2-tracking: 0;

  --t-h3-size: 1.375rem;
  --t-h3-stretch: 90%;
  --t-h3-weight: 650;
  --t-h3-lh: 1.25;
  --t-h3-tracking: 0;

  --t-lead-size: 1.1875rem;
  --t-lead-stretch: 100%;
  --t-lead-weight: 400;
  --t-lead-lh: 1.5;
  --t-lead-tracking: 0;

  --t-body-size: 1.0625rem;
  --t-body-stretch: 100%;
  --t-body-weight: 400;
  --t-body-lh: 1.6;
  --t-body-tracking: 0;

  --t-ui-size: 1rem;
  --t-ui-stretch: 100%;
  --t-ui-weight: 500;
  --t-ui-lh: 1.25;
  --t-ui-tracking: 0.005em;

  --t-small-size: 0.9375rem;
  --t-small-stretch: 100%;
  --t-small-weight: 400;
  --t-small-lh: 1.5;
  --t-small-tracking: 0;

  /* Measure §2.4 */
  --measure-body: 64ch;
  --measure-legal: 68ch;

  /* Spacing scale §3.1 */
  --s-4: 4px;
  --s-8: 8px;
  --s-12: 12px;
  --s-16: 16px;
  --s-24: 24px;
  --s-32: 32px;
  --s-48: 48px;
  --s-64: 64px;
  --section-pad: clamp(64px, 8vw, 128px);

  /* Container and gutter §3.1 */
  --container: 1360px;
  --gutter: 20px;
  --col-gap: 24px;

  /* Radius §3.1 */
  --radius-control: 3px;

  /* Header §7.4 and logo §3.3 */
  --header-h: 68px;
  --logo-w-sm: 200px;
  --logo-w-lg: 240px;
  --touch-min: 48px;

  /* Focus ring §1.3 */
  --focus-width: 3px;
  --focus-offset: 3px;

  /* Motion §6 */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --dur-bay: 650ms;
  --dur-bay-stagger: 120ms;
  --dur-menu-open: 200ms;
  --dur-menu-close: 150ms;
  --menu-shift: -8px;
  --dur-form-out: 150ms;
  --dur-form-in: 200ms;
  --dur-form-height: 200ms;
  --dur-feedback: 120ms;
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
  }
}

@media (min-width: 1024px) {
  :root {
    --header-h: 80px;
  }
}

@media (min-width: 1280px) {
  :root {
    --gutter: 48px;
    --t-h3-size: 1.5rem;
    --t-lead-size: 1.3125rem;
    --t-body-size: 1.125rem;
  }
}