/* Design tokens from Figma. Change a value here and it updates everywhere. */

:root {
  /* Colors */
  --blue: #1E00C8;
  --beige: #FFF8E7;
  --black: #000000;
  --white: #FFFFFF;

  /* Fonts: Work Sans everywhere; Space Mono only for column titles, technical details and numbers */
  --font-main: "Work Sans", sans-serif;
  --font-mono: "Space Mono", monospace;

  /* Font sizes: scale with screen width, capped at the 1920px design size */
  --size-small: clamp(16px, 1.05vw, 20px);   /* Download CV */
  --size-greeting: clamp(18px, 1.35vw, 26px);
  --size-title: clamp(40px, 3.35vw, 64px);   /* column headings */
  --size-body: clamp(30px, 2.7vw, 52px);     /* column text */

  /* Smaller sizes for the two narrow columns when one column is open */
  --size-title-small: clamp(22px, 1.75vw, 34px);
  --size-body-small: clamp(18px, 1.45vw, 28px);

  /* Open column: projects intro and list */
  --size-projects: clamp(24px, 2.1vw, 40px);

  /* Vertical column titles while a project page is open */
  --size-title-tiny: clamp(15px, 1.25vw, 26px);

  /* Project pages */
  --size-page-title: clamp(30px, 2.5vw, 48px);        /* project name */
  --size-page-heading: clamp(24px, 1.9vw, 36px);      /* section headings */
  --size-page-subheading: clamp(20px, 1.65vw, 32px);  /* "1. Complex Interface" */
  --size-page-body: clamp(16px, 1.25vw, 24px);        /* paragraphs */

  /* Motion: one curve for all column animations, gentle start and landing */
  --ease: cubic-bezier(0.65, 0, 0.35, 1);
  --expand-time: 0.8s;

  /* Space between blocks and sections on project pages (from the Figma grid) */
  --space-block: 64px;

  /* Layout */
  --top-bar-height: 50px;
  --greeting-height: 64px;
  --side-padding: clamp(32px, 3.125vw, 60px);
  --side-padding-narrow: 25px;   /* narrow columns while another column is open */
  --divider: 1px solid var(--black);
}