/* tokens/fonts.css */
/* Raleway — chosen with the client: clean, even-width geometric sans in the
   Arial/Calibri register. Served from Google Fonts. */
@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300..800;1,300..800&display=swap");

/* tokens/colors.css */
:root{
  /* Base — the palette is black, white, and light-through-white transparency. No hues. */
  --ink:#000000;
  --paper:#ffffff;

  /* White transparencies, used for secondary text, hairlines and hovers on the black ground */
  --white-88:rgba(255,255,255,.88);
  --white-72:rgba(255,255,255,.72);
  --white-56:rgba(255,255,255,.56);
  --white-32:rgba(255,255,255,.32);
  --white-16:rgba(255,255,255,.16);
  --white-08:rgba(255,255,255,.08);

  /* Black transparencies, for the rare white-ground surface (form fields, print) */
  --black-72:rgba(0,0,0,.72);
  --black-40:rgba(0,0,0,.40);
  --black-12:rgba(0,0,0,.12);

  /* Neutral greys — only legal use is photographic matting and filled form fields */
  --grey-field:#d9d9d9;
  --grey-mat:#a8a8a8;

  /* Semantic aliases */
  --bg-page:var(--ink);
  --bg-inverse:var(--paper);
  --surface-field:var(--grey-field);
  --surface-photo-mat:var(--grey-mat);

  --text-primary:var(--paper);
  --text-secondary:var(--white-72);
  --text-tertiary:var(--white-56);
  --text-on-inverse:var(--ink);
  --text-on-field:var(--ink);

  --rule:var(--paper);
  --rule-soft:var(--white-32);
  --border-strong:var(--paper);
  --focus-ring:var(--paper);
}

/* tokens/typography.css */
:root{
  --font-sans:"Raleway",Calibri,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,"SFMono-Regular",Menlo,monospace;

  --weight-light:300;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;

  /* Scale — display sizes are fluid; the site sets its name and page titles very large */
  --size-display-1:clamp(3.5rem,7vw,6.5rem);   /* hero name */
  --size-display-2:clamp(2.5rem,4.4vw,4rem);   /* hero role stack, page titles */
  --size-h1:clamp(2rem,3vw,2.75rem);
  --size-h2:clamp(1.5rem,2.2vw,2rem);          /* accordion headers */
  --size-h3:1.375rem;
  --size-body-lg:1.25rem;                      /* bio prose */
  --size-body:1.0625rem;
  --size-small:0.9375rem;
  --size-eyebrow:0.8125rem;

  --leading-tight:1.02;
  --leading-snug:1.16;
  --leading-body:1.62;
  --leading-loose:1.8;

  --tracking-tight:-0.02em;
  --tracking-normal:0;
  --tracking-wide:0.06em;
  --tracking-eyebrow:0.18em;

  /* Semantic type roles */
  --type-hero-name:var(--weight-medium) var(--size-display-1)/var(--leading-tight) var(--font-sans);
  --type-page-title:var(--weight-medium) var(--size-display-2)/var(--leading-snug) var(--font-sans);
  --type-section:var(--weight-semibold) var(--size-h2)/var(--leading-snug) var(--font-sans);
  --type-body:var(--weight-regular) var(--size-body-lg)/var(--leading-body) var(--font-sans);
  --type-nav:var(--weight-regular) var(--size-body)/1.4 var(--font-sans);
  --type-eyebrow:var(--weight-semibold) var(--size-eyebrow)/1.2 var(--font-sans);
}

/* tokens/spacing.css */
:root{
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;
  --space-10:128px;

  /* Layout */
  --container-max:1240px;
  --container-prose:64ch;
  --gutter:clamp(20px,5vw,64px); /* @kind spacing */
  --section-y:clamp(48px,8vw,var(--space-9));
  --header-y:var(--space-6);
  --stack-list:var(--space-5);   /* gap between credential / talk rows */
  --stack-prose:var(--space-5);  /* gap between paragraphs */
}

/* tokens/borders.css */
:root{
  /* Corners are square. The only curve in the system is a full circle (avatar, social button). */
  --radius-none:0px;
  --radius-sm:2px;
  --radius-full:999px;

  --border-hairline:1px;
  --border-thick:2px;

  --rule-hairline:var(--border-hairline) solid var(--rule);
  --rule-soft-line:var(--border-hairline) solid var(--rule-soft);
  --outline-open:var(--border-thick) solid var(--border-strong);

  /* No drop shadows anywhere on the black ground; kept for the white-ground field only */
  --shadow-none:none;
}

/* tokens/motion.css */
:root{
  --duration-fast:120ms; /* @kind other */
  --duration-base:200ms; /* @kind other */
  --duration-slow:320ms; /* @kind other */
  --ease-standard:cubic-bezier(.2,0,.2,1); /* @kind other */
  --ease-out:cubic-bezier(0,0,.2,1); /* @kind other */
  --transition-opacity:opacity var(--duration-base) var(--ease-standard);
  --transition-accordion:grid-template-rows var(--duration-slow) var(--ease-standard);
}