/* Foundations: type, spacing, corners, depth and motion.
   Colors live in colors.css, which is generated. This file is written by hand.
   The site and the brand hub both import these two files and nothing else for their base values. */

:root {
  /* ---- Type families ---- */
  --font-head: 'Jost', 'Futura', 'Century Gothic', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* ---- Type roles: size / line height / letter spacing / weight ---- */
  --type-display-size: clamp(2.6rem, 7vw, 4.75rem);
  --type-display-line: 1.02;
  --type-display-track: -0.02em;

  --type-h1-size: clamp(2rem, 4.6vw, 3rem);
  --type-h1-line: 1.08;
  --type-h1-track: -0.015em;

  --type-h2-size: clamp(1.5rem, 3.2vw, 2rem);
  --type-h2-line: 1.15;
  --type-h2-track: -0.01em;

  --type-h3-size: 1.25rem;
  --type-h3-line: 1.25;
  --type-h3-track: 0;

  --type-lede-size: 1.2rem;
  --type-lede-line: 1.55;

  --type-body-size: 1rem;
  --type-body-line: 1.65;

  --type-small-size: 0.875rem;
  --type-small-line: 1.5;

  --type-caption-size: 0.75rem;
  --type-caption-line: 1.4;

  --type-label-size: 0.75rem;      /* Jost, capitals */
  --type-label-track: 0.22em;

  --type-mono-size: 0.75rem;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 600;

  --measure: 66ch;                 /* longest comfortable line of body text */

  /* ---- Spacing: steps of 4, then 8 ---- */
  --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 ---- */
  --page-max: 1080px;              /* widest the content column gets */
  --page-gutter: var(--space-5);   /* space at the screen edge; 16px on phones */
  --grid-columns: 12;
  --grid-gap: var(--space-5);
  /* Breakpoints, for reference. Media queries cannot read variables.
     phone: up to 560px   tablet: up to 900px   desktop: 901px and up   wide: 1200px and up */

  /* ---- Corners: softened set. Brand graphics ignore these and stay square. ---- */
  --radius-none: 0;
  --radius-tag: 4px;
  --radius-control: 6px;           /* buttons, inputs */
  --radius-card: 10px;             /* cards, panels, menus */
  --radius-media: 10px;            /* images and video */
  --radius-round: 999px;           /* avatars only */

  /* ---- Depth: a surface and the shadow that goes with it ---- */
  --elevation-0-surface: var(--surface-0);
  --elevation-0-shadow: none;
  --elevation-1-surface: var(--surface-1);
  --elevation-1-shadow: none;                 /* cards sit on tone alone */
  --elevation-2-surface: var(--surface-2);
  --elevation-2-shadow: var(--shadow-2);      /* menus, hovered cards */
  --elevation-3-surface: var(--surface-3);
  --elevation-3-shadow: var(--shadow-3);      /* dialogs */

  --line-thin: 1px;
  --line-control: 1.5px;

  /* ---- Motion ---- */
  --duration-instant: 80ms;        /* pressed states */
  --duration-fast: 140ms;          /* hover, focus, color changes */
  --duration-base: 220ms;          /* things appearing: menus, tooltips */
  --duration-slow: 360ms;          /* panels, page-level moves */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);       /* entering, the default */
  --ease-in: cubic-bezier(0.3, 0, 1, 1);        /* leaving */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);  /* moving from one place to another */
}

/* The square set. Put data-corners="square" on <html> to switch the whole interface. */
[data-corners='square'] {
  --radius-tag: 0;
  --radius-control: 0;
  --radius-card: 0;
  --radius-media: 2px;
}

@media (max-width: 560px) {
  :root { --page-gutter: var(--space-4); --grid-gap: var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-instant: 0ms; --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; }
}