/* Cultum web — design tokens
   ---------------------------------------------------------------------------
   The same two-layer arrangement the app uses (App Prototype/css/tokens.css):
   layer 1 is the Figma library's semantic tokens, named exactly as the library
   names them; layer 2 is the shorter vocabulary this site is written in. Only
   the tokens the marketing site actually reaches for are carried over — the
   app's feedback ramps, elevation stack and sheet radii have no page to sit on
   here, and copying them across would be a second source of truth to keep. */

/* ============ 0. the faces ============
   Self-hosted rather than fetched from Google. The page's whole critical path
   used to be a render-blocking stylesheet on fonts.googleapis.com followed by
   three files on fonts.gstatic.com — two origins to resolve and connect to
   before a single glyph could arrive, and the intro waits on document.fonts
   before it will hand the page over. These are the same latin-subset files
   Google was serving, preloaded from /assets/fonts in the head.

   Caveat, Inter and Literata are all under the SIL Open Font License 1.1;
   assets/fonts/OFL.txt is the licence they ship under. */

@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/literata-700.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;
}

/* One variable file covers both weights the page asks Inter for. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../assets/fonts/inter-400-500.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: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/caveat-700.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;
}

:root {
  /* ============ 1. Figma semantic tokens ============ */

  /* brand */
  --brand-primary: #93EC7C;
  --brand-primary-inverse: #E1FAD8;   /* the page ground */
  --on-brand-primary: #0C100A;

  /* background & surface */
  --background-primary: #FAFAFA;
  --background-brand: #F5FDF2;

  /* border */
  --border-primary: #B6B9B6;
  --border-secondary: #C8CAC8;
  /* The frame's #B6B9B6 draws the field's only boundary at 1.78:1 against the
     page, under the 3:1 WCAG 1.4.11 asks of a control's edge. This is the same
     grey walked down the ramp until it clears the bar with room to spare —
     3.8:1 on the page, 4.0:1 on the field — because the ground behind the pill
     is not flat: the glows drift it toward #CFF3C0, and a value that scrapes
     3.0:1 on the token fails where the light pools. It is the one colour on
     the page that is not a library token. */
  --border-control: #7A7D7A;

  /* text & icons */
  --text-primary: #151515;
  --text-secondary: #404140;
  --text-placeholder: #606160;

  /* feedback — the form is the only thing on the page that can go wrong */
  --success-primary: #387D41;
  --success-secondary: #D2F5D2;
  --error-primary: #DA3737;
  --error-700: #7F2724;

  /* the darker step off the primary ramp, for accent-coloured small text */
  --primary-800: #3B5833;

  /* ============ 2. the names this site speaks ============ */

  --page: var(--brand-primary-inverse);
  --ink: var(--text-primary);
  --ink-2: var(--text-secondary);      /* 8.9:1 on --page */
  --ink-3: var(--text-placeholder);    /* 5.9:1 on --background-primary */
  --green: var(--brand-primary);
  --green-ink: var(--on-brand-primary);
  --green-deep: var(--primary-800);
  --paper: var(--background-primary);
  --hairline: var(--border-control);
  --danger: var(--error-700);
  --success: var(--success-primary);

  --green-rgb: 147, 236, 124;
  --ink-rgb: 21, 21, 21;

  /* ---- type ----
     Literata for the headline and the wordmark, Inter for everything that is
     read rather than looked at, Caveat for the one handwritten word. All three
     are the Figma library's choices; the stacks behind them are only there for
     a failed webfont. */
  --font-display: 'Literata', 'Iowan Old Style', Georgia, serif;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-script: 'Caveat', 'Bradley Hand', 'Segoe Script', cursive;

  --weight-low: 400;
  --weight-med: 500;
  --weight-high: 700;

  /* One fluid ramp instead of a stack of breakpoints. Each clamp() reaches its
     Figma value at desktop width and walks down from there, so the page has a
     size for every viewport rather than four fixed ones with jumps between. */
  --size-h1: clamp(30px, 5.9vw, 52px);
  --size-script: calc(var(--size-h1) * 1.077);   /* 56/52, as in the frame */
  --size-lead: clamp(16px, 1.55vw, 20px);
  --size-body: 16px;
  /* The one line set under body size: the note beneath the field, which is a
     footnote to the control above it — the promise, then the error — and reads
     as one when it is smaller and sits closer. Everything a person is meant to
     read as prose stays at 16px or above. */
  --size-note: 14px;
  /* the lockup is set 1.08x the frame's — the one place the page deliberately
     departs from it. At the frame's 38.4px the mark read as a favicon; at 1.5x
     it read as the loudest thing on a page whose headline should be that. The
     radius travels with the tile so the squircle keeps its shape. */
  --tile: 41.4px;
  --tile-radius: 10.35px;
  --tile-gap: 9.2px;
  --size-brand: clamp(19px, 1.6vw, 23px);

  --leading-tight: 1.2;
  --leading-snug: 1.3;
  --leading-normal: 1.4;

  /* ---- geometry ---- */
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-24: 24px;
  --radius-full: 9999px;

  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-21: 21px;      /* the frame's own column gap */
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;

  --divider: 1px;

  /* ---- elevation ----
     The library's Low and Medium steps. Nothing on this page floats higher. */
  --elevation-low:
    0 0 2px rgba(16, 16, 16, .12),
    0 2px 4px rgba(16, 16, 16, .11),
    0 4px 8px rgba(16, 16, 16, .10);
  --elevation-medium:
    0 0 2px rgba(16, 16, 16, .12),
    0 2px 4px rgba(16, 16, 16, .11),
    0 4px 8px rgba(16, 16, 16, .10),
    0 16px 32px rgba(16, 16, 16, .09);

  /* ---- motion ----
     The app's curves, unchanged, so the web splash and the app splash move the
     same way. --dur-draw is how long one stroke of the logo takes to draw. */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.32, 1.35, .5, 1);
  --ease-ios: cubic-bezier(.32, .72, .28, 1);
  --dur-fast: .18s;
  --dur: .3s;
  --dur-slow: .44s;
}