/* Shared design tokens for every page: home, case studies, gates, nav and footer.
   Edit values here, never redefine them in a page. */

:root {
  /* ─── Warm gray scale (32° hue) ─── */
  --gray-hue: 32;
  --gray00: hsl(var(--gray-hue), 10%, 98%);  /* page wash */
  --gray05: hsl(var(--gray-hue), 8%, 95%);   /* soft wash, inputs, placeholders */
  --gray10: hsl(var(--gray-hue), 8%, 90%);   /* hairlines, borders */
  --gray20: hsl(var(--gray-hue), 8%, 70%);   /* placeholder text, soft meta */
  --gray30: hsl(var(--gray-hue), 6%, 30%);   /* meta text */
  --gray35: hsl(var(--gray-hue), 3%, 20%);   /* secondary body */
  --gray40: hsl(var(--gray-hue), 6%, 5%);    /* primary text, dark surfaces */

  /* ─── Brand and status ─── */
  --site-color: #8438f4;       /* signature purple: links, marks, labels */
  --highlight-color: #ffc800;  /* text selection */
  --success-color: #3a7d44;
  --error-color: #c0392b;
  --white: #fff;

  /* ─── Semantic colors ─── */
  --text-color: var(--gray40);
  --meta-color: var(--gray30);
  --wash-color: var(--gray00);
  --code-wash: var(--gray05);
  --hover-color: var(--site-color);
  --hairline-color: var(--gray10);
  --ink-surface: var(--gray40);         /* dark footer, primary buttons */
  --on-ink: var(--gray00);              /* text on dark surfaces */
  --glass: hsla(0, 0%, 100%, .6);       /* floating nav background */
  --glass-border: hsla(0, 0%, 100%, .64);
  --glass-hover: hsla(0, 0%, 100%, .4);
  --scrim: hsla(0, 0%, 0%, .24);        /* image hover overlay */
  --wash-veil: hsla(var(--gray-hue), 10%, 98%, .56);  /* fades imagery into the wash */
  --hairline-on-ink: hsla(0, 0%, 100%, .12);  /* dividers on dark surfaces */
  --shadow-logo: 0 2px 8px hsla(0, 0%, 0%, .1), 0 1px 2px hsla(0, 0%, 0%, .06);

  /* ─── Font ─── */
  --font-sans: 'Instrument Sans', system-ui, -apple-system, sans-serif;  /* the only typeface */

  /* ─── Font weights ─── */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 600;  /* emphasis; there is no italic */

  /* ─── Type scale ─── */
  --fs-h1: clamp(2.5rem, 6vw, 4rem);      /* page titles, 40 to 64px */
  --fs-h2: clamp(2rem, 4.5vw, 3rem);      /* statements, big numbers, 32 to 48px */
  --fs-h3: clamp(1.5rem, 3vw, 2rem);      /* section headings, 24 to 32px */
  --fs-large: 1.25rem;                    /* ledes, prominent lists, 20px */
  --fs-base: 1rem;                        /* body and UI, 16px */
  --fs-small: .75rem;                     /* labels, captions, tags, 12px */

  /* ─── Line heights ─── */
  --lh-heading: 1.1;  /* h1, h2 */
  --lh-ui: 1.2;       /* h3, single line UI */
  --lh-body: 1.5;     /* large, base, small */

  /* ─── Spacing: 8px grid ─── */
  --space-1: .5rem;   /*   8px */
  --space-2: 1rem;    /*  16px */
  --space-3: 1.5rem;  /*  24px */
  --space-4: 2rem;    /*  32px */
  --space-5: 2.5rem;  /*  40px */
  --space-6: 3rem;    /*  48px */
  --space-8: 4rem;    /*  64px */
  --space-10: 5rem;   /*  80px */
  --space-12: 6rem;   /*  96px */
  --space-16: 8rem;   /* 128px */
  --space-20: 10rem;  /* 160px */

  /* ─── Radii ─── */
  --radius-s: 8px;     /* inputs, buttons, logos */
  --radius-m: 16px;    /* cards, images */
  --radius-l: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* ─── Layout ─── */
  --gutter: 1.5rem;          /* side margin on small screens, 24px */
  --measure: 680px;          /* comfortable line length for reading */
  --column: var(--measure);  /* the shared column: nav, hero, text and footer line up to it. Only the home page widens it */
  --column-box: calc(var(--column) + 2 * var(--gutter));  /* a column container including its gutters */
  --container-max: 68rem;    /* wide case imagery that breaks out of the column */
}

/* ─── Base ─── */
*, *::before, *::after { box-sizing: border-box; }

/* Emphasis is bold, never italic or underlined */
strong, b { font-weight: var(--fw-bold); }

/* ─── Image captions: paragraph size, centered under the image, never wider than the column ─── */
figcaption {
  max-width: min(var(--column), 100% - 2 * var(--gutter));
  margin: var(--space-2) auto 0;
  color: var(--meta-color);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  text-align: center;
  text-wrap: balance;
}

/* ─── Headings: the tag sets the size ─── */
h1 { font-size: var(--fs-h1); line-height: var(--lh-heading); font-weight: var(--fw-regular); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); font-weight: var(--fw-regular); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-ui); font-weight: var(--fw-regular); }