:root {
  --border-width-default: 1px;
  --border-width-focus: 3px;
  --border-width-strong: 2px;
  --form-input-height: 40px;
  --icon-size-lg: 48px;
  --icon-size-md: 32px;
  --icon-size-sm: 24px;
  --icon-size-xs: 16px;
  /* Breakpoint at which sidebar collapses to top bar. ≤900px triggers tablet layout. */
  --layout-breakpoint-tablet: 900px;
  /* Max width for form layouts. Keeps fields readable and connected. */
  --layout-form-max-width: 600px;
  /* Number of grid columns. 12 desktop. */
  --layout-grid-columns: 12px;
  /* Gap between grid columns. 24px desktop. */
  --layout-grid-gutter: 24px;
  /* Inner container padding. Matches spacing/page-margin. 32px desktop. */
  --layout-grid-margin: 32px;
  /* Maximum content width — container centred at this width. 1200px desktop. */
  --layout-max-content-width: 1200px;
  /* Max width for long-form body text. Optimal reading measure. 720px desktop. */
  --layout-reading-column-width: 720px;
  /* Fixed sidebar width on desktop. 30% of 1200px content width. */
  --layout-sidebar-width: 360px;
  /* Grandparent — project cards, thumbnails. 16px. */
  --radius-lg: 16px;
  /* Parent level — buttons, inputs, tooltips. 8px. */
  --radius-md: 8px;
  /* Fully rounded — badges, toggles. 999px. */
  --radius-pill: 999px;
  /* Deepest nested — tags, chips, indicators inside a card. 4px. */
  --radius-sm: 4px;
  /* Outermost containers — currently sharp (0px). Update primitive when needed. */
  --radius-xl: 0;
  --radius-xs: 2px;
  --spacing-2xl: 48px;
  /* Between inline elements — icon + label. 8px both. */
  --spacing-2xs: 4px;
  --spacing-3xl: 64px;
  --spacing-3xs: 2px;
  --spacing-4xl: 80px;
  --spacing-5xl: 96px;
  --spacing-6xl: 120px;
  /* Badge padding. 4px. */
  --spacing-badge-padding: 4px;
  /* Between content blocks within a section. 32px desktop. */
  --spacing-lg: 32px;
  /* Internal padding for project cards. 24px desktop. */
  --spacing-md: 24px;
  /* Min horizontal page padding. 32px desktop. */
  --spacing-page-margin-x: 32px;
  /* Page vertical padding. 80px desktop. */
  --spacing-page-margin-y: 80px;
  /* Between stacked elements in a column. 16px desktop. */
  --spacing-sm: 16px;
  --spacing-xl: 40px;
  /* Between inline elements — icon + label. 8px both. */
  --spacing-xs: 8px;
  /* Body md emphasis line height — 26px desktop */
  --type-body-md-emphasis-line-height: 26;
  /* Body md emphasis size — 16px desktop */
  --type-body-md-emphasis-size: 16;
  /* Semibold weight */
  --type-body-md-emphasis-weight: 600;
  /* Body md line height. 22px. */
  --type-body-md-line-height: 22px;
  /* Default long-form reading text. Case study content. 16px both viewports. */
  --type-body-md-size: 16px;
  /* Body weight — regular. */
  --type-body-md-weight: 400;
  /* Body sm emphasis line height — 22px desktop */
  --type-body-sm-emphasis-line-height: 22;
  /* Body sm emphasis size — 14px desktop */
  --type-body-sm-emphasis-size: 14;
  /* Semibold weight */
  --type-body-sm-emphasis-weight: 600;
  /* Body small line height. 20px desktop. */
  --type-body-sm-line-height: 20px;
  /* Supporting content, image captions, metadata. 14px. */
  --type-body-sm-size: 14px;
  /* Body small weight — regular. */
  --type-body-sm-weight: 400;
  --type-button-lg-letter-spacing: 0.5px;
  --type-button-lg-line-height: 24px;
  --type-button-lg-size: 16px;
  --type-button-lg-weight: 600;
  --type-button-md-letter-spacing: 0.5px;
  --type-button-md-line-height: 20px;
  --type-button-md-size: 14px;
  --type-button-md-weight: 600;
  --type-button-sm-letter-spacing: 0.5px;
  --type-button-sm-line-height: 16px;
  --type-button-sm-size: 12px;
  --type-button-sm-weight: 600;
  /* Caption line height. */
  --type-caption-line-height: 16px;
  /* Timestamps, tags, helper text. 13px. */
  --type-caption-size: 12px;
  /* Caption weight — regular. */
  --type-caption-weight: 400;
  /* Display letter spacing — slightly tight. */
  --type-display-letter-spacing: -0.5px;
  /* Display line height — tight for large type. */
  --type-display-line-height: 56px;
  /* Homepage hero, case study titles at full scale. 48px desktop. */
  --type-display-size: 48px;
  /* Display weight — bold. */
  --type-display-weight: 700;
  --type-family-bold: Eina04-Bold;
  /* Primary typeface — Eina04, all text. */
  --type-family-primary: Eina04;
  --type-family-semibold: Eina04-SemiBold;
  /* Heading 1 letter spacing. */
  --type-heading-lg-letter-spacing: -0.30000001192092896px;
  /* Heading 1 line height. */
  --type-heading-lg-line-height: 40px;
  /* Page-level titles. 32px desktop. */
  --type-heading-lg-size: 32px;
  /* Heading 1 weight — semibold. */
  --type-heading-lg-weight: 600;
  /* Heading 2 letter spacing. */
  --type-heading-md-letter-spacing: -0.20000000298023224px;
  /* Heading 2 line height. */
  --type-heading-md-line-height: 32px;
  /* Case study section headers. 24px desktop. */
  --type-heading-md-size: 24px;
  /* Heading 2 weight — semibold. */
  --type-heading-md-weight: 600;
  /* Heading 3 line height. */
  --type-heading-sm-line-height: 28px;
  /* Subsections, callout labels. 20px desktop. */
  --type-heading-sm-size: 20px;
  /* Heading 3 weight — semibold. */
  --type-heading-sm-weight: 600;
  /* Label letter spacing — slightly open. */
  --type-label-letter-spacing: 0.009999999776482582px;
  /* Label line height. */
  --type-label-line-height: 16px;
  /* Navigation, buttons, input labels. 14px. */
  --type-label-size: 12px;
  /* Label weight — medium. Distinguishes UI text from body copy. */
  --type-label-weight: 600;
  /* Overline letter spacing — wide, adds visual texture. */
  --type-overline-letter-spacing: 0.07999999821186066px;
  /* Overline line height. */
  --type-overline-line-height: 16px;
  /* Category labels, project tags above a heading. 12px. */
  --type-overline-size: 12px;
  /* Overline weight — semibold. */
  --type-overline-weight: 600;
}