/* Shifted Clicks design tokens.
   Layout: bright gallery page; a light aurora hero and dark framed "stages" for proof and promises;
   one green-to-aqua aurora gradient carries the brand, a solid green carries every CTA.
   Change a colour or font here and the whole site follows. */
:root {
  color-scheme: light;

  /* Colour */
  --paper: #F3F6F3;        /* page ground, cool white with a green bias */
  --surface: #FFFFFF;
  --mint: #E9F8F0;         /* bright hero ground */
  --ink: #06100B;          /* text + dark stages (brand #030806 family) */
  --ink-2: #0E1A14;
  --muted: #55615A;
  --line: #D9E1DB;
  --line-dark: #1E2D25;
  --on-dark: #EDF3EF;
  --on-dark-muted: #92A39A;

  --signal: #14D97C;       /* primary green: every CTA */
  --signal-ink: #0A8A4F;   /* green for text and icons on light */
  --signal-soft: #DDF7E9;

  /* aurora gradient stops: green into lime, aqua and sky */
  --g1: #14D97C;
  --g2: #B4F23E;
  --g3: #22D3C8;
  --g4: #4C8DFF;
  --grad: linear-gradient(100deg, var(--g1) 0%, var(--g2) 32%, var(--g3) 64%, var(--g4) 100%);
  --grad-text: linear-gradient(100deg, #0B9F5A 0%, #0FB07E 40%, #0E9FA6 75%, #2C6FE0 100%);

  --good: #12A35E;
  --warn: #D9901A;
  --bad: #E5484D;

  /* Type: Neutral Sans (self-hosted, see fonts.css) for headings */
  --f-display: "Neutral Sans", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --f-stack: "Stack Sans Headline", "Neutral Sans", "Helvetica Neue", Arial, sans-serif; /* dark-section headings */
  --f-tech: "Toronto", "Mozilla Text", ui-monospace, monospace; /* technical and browser text */
  --f-mono: "Mozilla Text", "Instrument Sans", system-ui, sans-serif; /* utility face: labels, tags, UI */

  --t-hero: clamp(2.6rem, 6vw, 5.6rem);
  --t-h2: clamp(2rem, 4.2vw, 3.5rem);
  --t-h3: clamp(1.25rem, 2vw, 1.6rem);
  --t-lead: clamp(1.05rem, 1.35vw, 1.22rem);
  --t-body: 1rem;
  --t-small: .875rem;
  --t-label: .75rem;

  /* Space */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 7rem;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --max: 1240px;

  /* Shape + motion */
  --r-stage: 30px;
  --r-card: 20px;
  --r-pill: 999px;
  --shadow-float: 0 30px 70px -28px rgba(6, 16, 11, .45);
  --shadow-soft: 0 18px 40px -24px rgba(6, 16, 11, .25);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: .2s;
  --t-slow: .8s;
}