/* Design tokens shared by the landing page and the app pages (/thanks, /account, /admin).
   Import with <link rel="stylesheet" href="/landing/tokens.css">, then use the variables.
   Two grounds: "dark" (inside the machine, top of the landing page) and "light" (daylight,
   where the forms live). One accent hue, in two strengths so it clears AA on both grounds. */

@font-face {
  font-family: "Geologica";
  src: url("/landing/fonts/geologica-latin-wght-shrp.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* Arial scaled to Geologica's width and vertical metrics, so the swap does not reflow headings. */
@font-face {
  font-family: "Geologica Fallback";
  src: local("Arial");
  font-style: normal;
  font-weight: 100 900;
  size-adjust: 97.2888%;
  ascent-override: 100.2171%;
  descent-override: 28.2664%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Hanken Grotesk";
  src: url("/landing/fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* Arial scaled to Hanken Grotesk's width and vertical metrics, regular and bold sources. */
@font-face {
  font-family: "Hanken Grotesk Fallback";
  src: local("Arial");
  font-style: normal;
  font-weight: 400 500;
  size-adjust: 100.373551%;
  ascent-override: 99.627839%;
  descent-override: 30.187235%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Hanken Grotesk Fallback";
  src: local("Arial Bold");
  font-style: normal;
  font-weight: 600 900;
  size-adjust: 100.373551%;
  ascent-override: 99.627839%;
  descent-override: 30.187235%;
  line-gap-override: 0%;
}

/* The first screen keeps the lap 5 face. Scoped to .hero in site.css through --cn-font-hero. */
@font-face {
  font-family: "Outfit";
  src: url("/landing/fonts/outfit-latin-var.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  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;
}

/* Arial scaled to Outfit's width and vertical metrics, so the swap does not reflow the headline. */
@font-face {
  font-family: "Outfit Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 94.4%;
  ascent-override: 105.9%;
  descent-override: 27.5%;
  line-gap-override: 0%;
}

:root {
  /* Grounds and surfaces */
  --cn-ground-dark: #0f1211;
  --cn-surface-dark: #171b1a;
  --cn-ground-light: #eceee9;
  --cn-surface-light: #ffffff;

  /* Ink (contrast against the matching ground is in the comment) */
  --cn-ink: #141716;              /* 15.4:1 on ground-light */
  --cn-ink-soft: #4b534f;         /* 6.8:1 on ground-light */
  --cn-ink-hint: #59625d;         /* 6.3:1 on white */
  --cn-ink-on-dark: #eef1ee;      /* 16.5:1 on ground-dark */
  --cn-ink-on-dark-soft: #a9b3ae; /* 8.7:1 on ground-dark */

  /* Accent: filament vermilion */
  --cn-accent: #ff6a3a;           /* fills and marks on dark, 6.6:1 */
  --cn-accent-ink: #170a05;       /* text on --cn-accent, 6.8:1 */
  --cn-accent-strong: #b23a10;    /* text, links and fills on light, 5.1:1 on ground-light */
  --cn-on-accent-strong: #ffffff; /* text on --cn-accent-strong, 6.0:1 */

  /* Lines and states */
  --cn-line: rgba(20, 23, 22, 0.14);
  --cn-line-strong: #8a938e;      /* form control borders, 3.2:1 on white */
  --cn-line-on-dark: rgba(238, 241, 238, 0.14);
  --cn-danger: #b42318;
  --cn-danger-bg: #fdeceb;
  --cn-success: #1f7a4d;
  --cn-success-bg: #e7f4ec;

  /* Type */
  --cn-font-display: "Geologica", "Geologica Fallback", Arial, sans-serif;
  --cn-font-hero: "Outfit", "Outfit Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cn-font-text: "Hanken Grotesk", "Hanken Grotesk Fallback", Arial, sans-serif;
  --cn-font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono",
    "Segoe UI Mono", Consolas, monospace;

  --cn-text-xs: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);
  --cn-text-sm: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --cn-text-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --cn-text-lg: clamp(1.125rem, 1.06rem + 0.35vw, 1.3125rem);
  --cn-text-xl: clamp(1.375rem, 1.22rem + 0.8vw, 1.75rem);
  --cn-text-2xl: clamp(1.75rem, 1.45rem + 1.6vw, 2.625rem);
  --cn-text-3xl: clamp(2.125rem, 1.6rem + 2.8vw, 3.75rem);
  --cn-text-4xl: clamp(2.5rem, 1.45rem + 4.9vw, 4.875rem);

  --cn-size-hero: clamp(2.375rem, 1.825rem + 2.256vw, 3.75rem);
  --cn-size-section: clamp(1.875rem, 1.625rem + 1.026vw, 2.5rem);
  --cn-size-step: clamp(1rem, 0.9rem + 0.4103vw, 1.25rem);
  --cn-size-hero-sub: clamp(1.0625rem, 1.0375rem + 0.1026vw, 1.125rem);
  --cn-size-list: clamp(1.125rem, 1.025rem + 0.4103vw, 1.375rem);
  --cn-size-nav: clamp(0.875rem, 0.85rem + 0.1026vw, 0.9375rem);
  --cn-size-brand: clamp(1.0625rem, 1.0375rem + 0.1026vw, 1.125rem);
  --cn-size-fact: clamp(0.875rem, 0.85rem + 0.1026vw, 0.9375rem);

  --cn-weight-display: 400;
  --cn-weight-body: 400;
  --cn-weight-medium: 500;
  --cn-weight-ui: 600;

  --cn-leading-tight: 1.08;
  --cn-leading-snug: 1.22;
  --cn-leading-body: 1.6;
  --cn-leading-hero: 1.08;
  --cn-leading-section: 1.14;
  --cn-leading-step: 1.3;
  --cn-leading-ui: 1.2;
  --cn-leading-fact: 1.5;

  --cn-track-display: -0.015em;
  --cn-track-heading: -0.01em;
  --cn-track-label: 0;
  --cn-track-body: 0;
  --cn-track-ui: 0;
  --cn-measure: 62ch;

  /* Space: 4 px base */
  --cn-space-1: 0.25rem;
  --cn-space-2: 0.5rem;
  --cn-space-3: 0.75rem;
  --cn-space-4: 1rem;
  --cn-space-5: 1.5rem;
  --cn-space-6: 2rem;
  --cn-space-7: 3rem;
  --cn-space-8: 4rem;
  --cn-space-9: 6rem;
  --cn-space-10: 8rem;
  --cn-gutter: clamp(1rem, 4.4vw, 5rem);
  --cn-section: clamp(4rem, 9vw, 9rem);
  --cn-maxw: 80rem;

  /* Radius: one scale for the whole product */
  --cn-radius-sm: 6px;
  --cn-radius-md: 10px;
  --cn-radius-lg: 18px;
  --cn-radius-pill: 999px;

  /* Elevation: offset and blur, tinted to the ground */
  --cn-shadow-1: 0 1px 2px rgba(15, 18, 17, 0.08), 0 2px 6px -1px rgba(15, 18, 17, 0.08);
  --cn-shadow-2: 0 2px 4px rgba(15, 18, 17, 0.08), 0 10px 24px -6px rgba(15, 18, 17, 0.16);
  --cn-shadow-3: 0 4px 8px rgba(15, 18, 17, 0.1), 0 22px 48px -12px rgba(15, 18, 17, 0.28);
  --cn-shadow-dark: 0 2px 6px rgba(0, 0, 0, 0.4), 0 18px 40px -12px rgba(0, 0, 0, 0.6);

  /* Motion */
  --cn-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --cn-duration-fast: 160ms;
  --cn-duration-base: 240ms;
  --cn-focus-ring: 0 0 0 2px var(--cn-surface-light), 0 0 0 4px var(--cn-accent-strong);
}