/* Project Kite, built on the layout of creativecue.co: the shared tokens. Every colour, size and curve on the site
   comes from here. Sizes are the reference's own at 1440 (measured), scaled down to phones with clamp(). */

@font-face { font-family: "Funnel Display"; src: url("/assets/fonts/funnel-display.woff") format("woff"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "Funnel Sans"; src: url("/assets/fonts/funnel-sans.woff") format("woff"); font-weight: 300 800; font-display: swap; }

:root {
  color-scheme: dark;

  /* Colour roles. The reference is #000 with #fff; Kite's ground is night, a black taken from the brand plum,
     and its white is bone, a muted white. Wasabi is the one accent; persimmon marks AI work only. */
  --bg: #160d12;
  --surface: #21151b;
  --surface-2: #351e28;
  --ink: #eee6e2;
  --muted: #bcaeb4;
  --faint: #4a3a42;
  --line: rgba(238, 230, 226, 0.09);
  --line-strong: rgba(238, 230, 226, 0.22);
  /* What a control is known by, at 3:1 or more on night and on the surfaces (WCAG 1.4.11), where --line and
     --line-strong only divide: --edge for a text field's or a time button's edge (3.3 to 3.5:1), --tile for an open
     day in the calendar (3.1:1 on the surface; ink on it 4.7:1, wasabi 4.7:1). */
  --edge: rgba(238, 230, 226, 0.42);
  --tile: #775f6b;
  --accent: #e9f056;
  --accent-ink: #160d12;
  --ai: #ff5c34;
  --sky: #d7efff;
  --jade: #aeb8a0;
  --plum: #351e28;

  /* Type. One family, Kite's Funnel: Display for headings, Sans for running text. No second face. */
  --font-sans: "Funnel Sans", system-ui, sans-serif;
  --font-display: "Funnel Display", "Funnel Sans", system-ui, sans-serif;

  /* Five sizes: small 14/20, body 16/24, lead 18/32, heading 42/46, numeral 144/120 (at 1440). */
  --t-small: 14px;
  --t-body: 16px;
  --t-lead: clamp(16px, 1.25vw, 18px);
  --t-h: clamp(30px, 2.92vw, 42px);
  --t-num: clamp(88px, 10vw, 144px);
  --lh-small: 20px;
  --lh-h: 1.1;
  --track-h: -0.01em;

  /* Frame: 64px margins at 1440 (the reference's), 20px on a phone. */
  --margin: clamp(20px, 4.45vw, 64px);
  --nav-h: clamp(72px, 6.95vw, 100px);
  --section-gap: clamp(120px, 13.9vw, 200px);
  --radius: 14px;

  /* Motion. Exits are about 65% of their entrance. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-exit: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --d-press: 140ms;
  --d-hover: 180ms;
  --d-menu: 240ms;
  --d-reveal: 800ms;
}