/* Design tokens from Figma, file "My site".
   Colours: variable collection "Site colors" (same names, "/" → "-").
   Type: one class per Figma text style. Figma line height "100" = auto = normal. */

:root {
  /* Colours */
  --bg-light: #f1f1f1;
  --bg-dark: #1d1d1d;
  --text-primary: #000000;
  --text-body: #212121;
  --text-heading-grey: #6b6969;
  --text-muted: #656363;
  --text-on-dark: #fbfbfb;
  --text-on-dark-muted: #e5dada;
  --text-on-dark-display: #e3dfdf;
  --button-primary: #171717;
  --surface-white: #ffffff;
  --state-error: #ff736b;
  --state-success: #73d18c;

  /* Radius */
  --radius-pill: 24px;
  --radius-panel: 16px;
  --radius-image: 12px;
  --radius-input: 8px;
  --radius-cover: 6px;   /* project card cover (Figma "Picture") */
  --radius-photo: 19px;  /* hero photo */

  /* Layout */
  --container: 1248px;            /* case pages */
  --page-pad: 40px;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (max-width: 767.98px) {
  :root { --page-pad: 20px; }
}

/* Text styles */
.t-display-80      { font: 400 80px/1 var(--font); }
.t-display-60      { font: 400 60px/normal var(--font); }
.t-display-40-120  { font: 400 40px/1.2 var(--font); }
.t-display-40-100  { font: 400 40px/1 var(--font); }

.t-heading-32      { font: 400 32px/normal var(--font); }
.t-heading-32-125  { font: 400 32px/1.25 var(--font); }
.t-heading-32-120  { font: 400 32px/1.2 var(--font); }
.t-heading-28-120  { font: 400 28px/1.2 var(--font); }
.t-heading-26-120  { font: 400 26px/1.2 var(--font); }
.t-heading-24-medium { font: 500 24px/normal var(--font); }
.t-heading-22      { font: 400 22px/normal var(--font); }
.t-heading-22-medium { font: 500 22px/normal var(--font); }
.t-heading-22-125  { font: 400 22px/1.25 var(--font); }
.t-heading-22-120  { font: 400 22px/1.2 var(--font); }

.t-body-16         { font: 400 16px/1.5 var(--font); }
.t-body-16-medium  { font: 500 16px/1.5 var(--font); }
.t-body-15         { font: 400 15px/1.5 var(--font); }
.t-body-15-medium  { font: 500 15px/1.5 var(--font); }
.t-body-14         { font: 400 14px/1.5 var(--font); }

.t-label-18        { font: 400 18px/normal var(--font); }
.t-label-16        { font: 400 16px/normal var(--font); }
.t-label-16-medium { font: 500 16px/normal var(--font); }
.t-label-16-bold   { font: 700 16px/normal var(--font); }
.t-label-15        { font: 400 15px/normal var(--font); }
.t-label-15-medium { font: 500 15px/normal var(--font); }

.t-caption-14      { font: 400 14px/normal var(--font); }
.t-caption-14-medium { font: 500 14px/normal var(--font); }
.t-caption-14-bold { font: 700 14px/normal var(--font); }
.t-caption-13      { font: 400 13px/normal var(--font); }
.t-caption-12      { font: 400 12px/normal var(--font); }

/* Home page grid (Figma 46:927, updated): 1240px content, 100px each side at 1440, aligned with the header */
.home { --container: 1240px; }