/*
 * Design tokens: the Figma variables, as CSS custom properties.
 * Two layers: SCALES (raw steps, e.g. --green-800) and ROLES (what a colour is for, e.g. --ink).
 * Components use roles where one exists, otherwise a scale step. No raw colour values outside this file.
 */

/*
 * Fonts. The Figma file uses TRIAL (evaluation) cuts of Aeonik and Onsite Mono, which are
 * not licensed for a live website. local() uses fonts installed on this machine for review;
 * buy webfont licences and drop the .woff2 files into /assets/fonts before launch.
 */
@font-face { font-family: "Aeonik"; font-weight: 400; font-display: swap;
  src: local("Aeonik TRIAL Regular"), local("AeonikTRIAL-Regular"), local("Aeonik-Regular"), url("../fonts/Aeonik-Regular.woff2") format("woff2"); }
@font-face { font-family: "Aeonik"; font-weight: 300; font-display: swap;
  src: local("Aeonik TRIAL Light"), local("AeonikTRIAL-Light"), url("../fonts/Aeonik-Light.woff2") format("woff2"); }
@font-face { font-family: "Aeonik"; font-weight: 600; font-display: swap;
  src: local("Aeonik TRIAL SemiBold"), local("AeonikTRIAL-SemiBold"), url("../fonts/Aeonik-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Onsite Mono"; font-weight: 400; font-display: swap;
  src: local("Onsite Mono TRIAL Regular"), local("OnsiteMonoTRIAL-Regular"), url("../fonts/OnsiteMono-Regular.woff2") format("woff2"); }

:root {
  /*
   * Colour: ONE green scale, from the palest tint to the darkest near-black.
   * Backgrounds, brand greens and text are all steps on this ladder. Never write a hex value elsewhere.
   */
  --white: #ffffff;
  --green-25: #f7fbfa;   /* page background, text on dark */
  --green-50: #eefcf8;   /* pale section background */
  --green-100: #d2f8ef;  /* chips, light buttons, placeholders */
  --green-200: #a5f1df;  /* mint accents, chip hover */
  --green-300: #79ebcf;
  --green-400: #4ce4bf;
  --green-500: #1ed2a7;
  --green-600: #18ae8a;  /* join section */
  --green-700: #128a6e;
  --green-800: #0d6752;  /* primary brand green */
  --green-900: #074337;  /* footer, muted text */
  --green-950: #03251e;  /* body text */
  --green-975: #00130f;  /* headings, dark buttons */

  /* Roles: what a colour is FOR. Components use these; change a role here to restyle everywhere. */
  --page-bg: var(--green-25);
  --surface-tint: var(--green-50);
  --ink: var(--green-975);
  --ink-soft: var(--green-950);
  --ink-muted: var(--green-900);
  --heading-green: var(--green-900);
  --on-dark: var(--green-25);
  --on-dark-soft: var(--green-100);  /* secondary text on dark sections: 6:1 on green-800, use instead of fading white */
  --near-black: var(--green-975);
  --mint: var(--green-200);
  --mint-cta: var(--green-300);
  --accent: var(--green-800);
  --placeholder: var(--green-100);
  --card-bg: rgb(from var(--green-25) r g b / 0.4);
  --card-border: rgb(from var(--green-800) r g b / 0.2);
  --glass-bg: rgb(from var(--green-25) r g b / 0.1);
  --glass-border: rgb(from var(--green-25) r g b / 0.2);
  --error-soft: #ffd6d6;

  /* Type */
  --font-sans: "Aeonik", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Onsite Mono", ui-monospace, "SF Mono", monospace;

  /* Motion: one easing and three speeds, used by every hover and animation */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.33, 0, 0.67, 1); /* "easy ease": gentle start and finish */
  --dur-fast: 150ms;
  --dur: 300ms;
  --dur-slow: 700ms;

  /* Layout: the 1440px frame with 64px side margins */
  --container: 1312px;
  --gutter: 64px;
  --radius-image: 12px;
  --radius-card: 12px;
  --radius-card-lg: 20px;
  --radius-tag: 32px;
  --radius-pill: 48px;
  --section-space: 120px;  /* default vertical padding for page sections */
}