/*
 * Axioms: the few decisions every size and space on the page comes from.
 * See docs/design-philosophy.md. Shared by layout and style.
 */

:root {
  /*
   * Type scale. Utopia's fluid modular scale (utopia.fyi), interpolated
   * between a 320px and a 1440px viewport.
   *
   * Base 16px on phones, 21px on wide screens: Rutter, "Use the default
   * font size for paragraphs" and "Calculate text sizes for different
   * devices" (16px on phones, 18-19px on laptops, 22px on large displays).
   *
   * Ratio 1.2 on phones, 1.333 (a perfect fourth) on wide screens: Rutter,
   * "Adjust the text size and scale for different screens" -- more
   * contrast where there's room for it. Every Layout, "Modular scale".
   *
   * Step -1 is the smallest size (Rutter, "Choose your smallest size
   * first"); step -2 would be about 11px and isn't legible enough. The
   * scale stops at step 5 (Rutter, "Keep your big text under control").
   */
  --step--1: clamp(0.8333rem, 0.7902rem + 0.2158vw, 0.9844rem);
  --step-0: clamp(1rem, 0.9107rem + 0.4464vw, 1.3125rem);
  --step-1: clamp(1.2rem, 1.0429rem + 0.7857vw, 1.75rem);
  --step-2: clamp(1.44rem, 1.1848rem + 1.2762vw, 2.3333rem);
  --step-3: clamp(1.728rem, 1.3328rem + 1.9759vw, 3.1111rem);
  --step-4: clamp(2.0736rem, 1.4809rem + 2.9636vw, 4.1481rem);
  --step-5: clamp(2.4883rem, 1.619rem + 4.3465vw, 5.5309rem);

  /*
   * Space scale. Utopia's space scale: multiples of the base text size,
   * so text and the space around it share one rhythm. --space-m is 1.5x
   * the base, the same as the body line height, so vertical space falls
   * in measured intervals (Rutter, "Apply vertical space in measured
   * intervals") without a rigid baseline grid (Rutter, "Don't slavishly
   * follow a baseline grid").
   */
  --space-3xs: clamp(0.25rem, 0.2277rem + 0.1116vw, 0.3281rem);
  --space-2xs: clamp(0.5rem, 0.4554rem + 0.2232vw, 0.6562rem);
  --space-xs: clamp(0.75rem, 0.683rem + 0.3348vw, 0.9844rem);
  --space-s: clamp(1rem, 0.9107rem + 0.4464vw, 1.3125rem);
  --space-m: clamp(1.5rem, 1.3661rem + 0.6696vw, 1.9688rem);
  --space-l: clamp(2rem, 1.8214rem + 0.8929vw, 2.625rem);
  --space-xl: clamp(3rem, 2.7321rem + 1.3393vw, 3.9375rem);
  --space-2xl: clamp(4rem, 3.6429rem + 1.7857vw, 5.25rem);
  --space-3xl: clamp(6rem, 5.4643rem + 2.6786vw, 7.875rem);

  /*
   * Line spacing, one value per step of the type scale. 1.5 for running
   * text: Rutter, "Increase line spacing from the browser default" (start
   * at 1.4, adjust for the face); Every Layout, "Modular scale" (1.5).
   * Larger text needs relatively less (Rutter, "Line height should suit
   * text size and measure", "Tighten up leading in headings"), so the
   * value falls as the size rises, for headings and paragraphs alike.
   * The exact values are set by eye, as Rutter says they must be.
   */
  --leading-body: 1.5;
  --leading-step-1: 1.35;
  --leading-step-2: 1.25;
  --leading-step-3: 1.2;
  --leading-step-4: 1.1;
  --leading-step-5: 1.05;

  /*
   * Line length. Bringhurst's 45-75 characters, with 66 as the ideal
   * (Rutter, "Choose a comfortable measure"). Every Layout, "Axioms":
   * set the measure once and honor it everywhere, at 60ch. A ch is the
   * width of a zero, wider than the average character, so 60ch sets
   * about 66 characters of Source Serif 4 text; 66ch set about 74.
   */
  --measure: 60ch;
  --measure-narrow: 45ch;

  /*
   * Page widths. The wide container holds multi-column layouts; at the
   * largest base size (21px) it is about 1600px.
   */
  --width-wide: 76rem;
  --gutter: var(--space-m);
}