/* Adseye — design tokens.

   Colour comes from the mark: ink is the outline of the eye, mint is its
   pupil. Mint is a fill colour only. On white it is far too light to be text
   (1.8:1) or a focus ring, so the text accent is the darker green and mint is
   kept for edges, dots, marks and the closing band, where ink sits on it at
   6.7:1.

   Type is the product's own: Instrument Sans for reading and interface,
   Instrument Serif in italic for the few big lines that earn it, IBM Plex Mono
   for figures and labels. The scales are fluid and mobile-first: the first
   number in each clamp is the phone size. */

:root {
  /* ---- colour ---- */
  --ink: #003E32;        /* headings, primary buttons, dark bands */
  --ink-2: #1E4A40;      /* body text — 9.9:1 on white */
  --green: #087951;      /* text accent, links — 5.4:1 on white */
  --green-deep: #06603F; /* hover state of the accent */
  --field: #0B5443;      /* hover state of ink buttons */
  --mint: #1DDC7C;       /* fills, edges and marks only */
  --mint-soft: #DCF7E7;  /* a tint for "good" states */
  --mist: #A6E7C6;       /* labels and muted text on ink — 8.5:1 */
  --soft: #F2F7F4;       /* section and card background */
  --soft-2: #E8F0EB;     /* hover on soft */
  --border: #DCE7DF;     /* hairlines */
  --muted: #5E7569;      /* secondary text — 5.0:1 on white, 4.6:1 on soft */
  --white: #FFFFFF;

  --amber-ink: #7A4E00;  --amber-bg: #F5E6C8;
  --red-ink: #8A2B1E;    --red-bg: #F3DEDA;
  --blue-ink: #1E4E9C;   --blue-bg: #E3EBF7;

  --text: var(--ink-2);
  --heading: var(--ink);
  --link: var(--green);

  /* ---- type ---- */
  --sans: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --display: clamp(2.75rem, 1.9rem + 4.2vw, 4.75rem);  /* 44 → 76 */
  --h1: clamp(2.25rem, 1.7rem + 2.6vw, 3.5rem);        /* 36 → 56 */
  --h2: clamp(1.75rem, 1.4rem + 1.7vw, 2.5rem);        /* 28 → 40 */
  --h3: clamp(1.25rem, 1.15rem + .4vw, 1.375rem);      /* 20 → 22 */
  --lead: clamp(1.125rem, 1.05rem + .4vw, 1.25rem);    /* 18 → 20 */
  --body: 1rem;                                        /* 16, then 17 */
  --small: .9375rem;                                   /* 15 */
  --tiny: .8125rem;                                    /* 13 */
  --label: .75rem;                                     /* 12, mono, tracked */

  /* ---- space (multiples of 4px) ---- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px;
  --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px; --s20: 80px; --s24: 96px;
  --section: clamp(56px, 4vw + 36px, 104px);

  /* ---- structure ---- */
  --gutter: 16px;          /* the phone gutter the whole site is measured at */
  --container: 1200px;
  --narrow: 760px;
  --radius: 8px;
  --radius-lg: 12px;
  --hit: 48px;             /* every control is at least this tall */
  --shadow: 0 16px 48px rgba(0, 62, 50, .10);
  --ease: cubic-bezier(.22, .61, .36, 1);

  color-scheme: light;
}

@media (min-width: 600px)  { :root { --gutter: 24px; --body: 1.0625rem; } }
@media (min-width: 1024px) { :root { --gutter: 40px; } }

/* A dark band: the same tokens, re-pointed. */
.on-ink {
  --text: #D7E6DE;
  --heading: var(--white);
  --link: var(--mist);
  --muted: var(--mist);
  --border: rgba(255, 255, 255, .18);
  --soft: rgba(255, 255, 255, .06);
  --soft-2: rgba(255, 255, 255, .10);
  background: var(--ink);
  color: var(--text);
}

/* The mint band: ink on mint, 6.7:1. */
.on-mint {
  --text: var(--ink);
  --heading: var(--ink);
  --link: var(--ink);
  --muted: var(--ink-2);
  --border: rgba(0, 62, 50, .25);
  background: var(--mint);
  color: var(--ink);
}