@layer reset, base, components, utilities;

/* Layers, not file names, decide precedence: Propshaft links every stylesheet
 * alphabetically, so file order is incidental. */

:root {
  /* Colors: palette A, Ink & Verdict (../brand/brainstorming/colors).
   * Pass, fail and borderline are verdict colors only, each a text color on its tint. */
  --color-ink: #171614;
  --color-ink-hover: #2E2C28;
  --color-ground: #F5F4F0;
  --color-surface: #FFFFFF;
  --color-muted: #65635E;
  --color-hairline: #E1DFD8;
  --color-placeholder: #E9E8E3;
  --color-warm: #ECE9E1; /* the warm band behind examples and the document strip */

  --color-pass: #1F7A47;
  --color-pass-tint: #E4F3EA;
  --color-fail: #A41E1A;
  --color-fail-tint: #FBE3E0;
  --color-borderline: #9A5B00;
  --color-borderline-tint: #FBEFD3;

  /* Text on an ink band. */
  --color-on-ink: #F3F1EB;
  --color-on-ink-muted: #CFCCC3;

  --shadow-card: 0 30px 60px rgb(23 22 20 / 14%);
  --shadow-phone: 0 24px 48px rgb(23 22 20 / 10%);
  --shadow-float: 0 14px 34px rgb(23 22 20 / 12%);

  --radius-card: 18px;

  /* Text: Source Serif 4 for titles, Source Sans 3 for text, Source Code Pro for measurements.
   * h3 is never serif (the serif is for 22 px and up); a serif title under an h2 takes --text-title. */
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-text: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Source Code Pro", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-h1: 600 54px/1.08 var(--font-display);
  --text-h2: 600 38px/1.14 var(--font-display);
  --text-h3: 600 20px/26px var(--font-text);
  --text-title: 600 27px/1.2 var(--font-display);
  --text-lead: 400 20px/30px var(--font-text);
  --text-body: 400 17px/26px var(--font-text);
  --text-small: 400 15px/22px var(--font-text);
  --text-caption: 400 14px/20px var(--font-text);

  /* Layout */
  --page-width: 1160px;
  --page-gutter: 40px;
  --section-space: 96px;

  /* Focus rings for keyboard navigation */
  --focus-ring-color: var(--color-ink);
  --focus-ring-offset: 2px;
  --focus-ring-size: 2px;

  /* Phone: the 390 artboard stacks everything below 760 px. */
  @media (max-width: 760px) {
    --text-h1: 600 36px/1.1 var(--font-display);
    --text-h2: 600 29px/1.16 var(--font-display);
    --text-title: 600 24px/1.2 var(--font-display);
    --text-lead: 400 18px/27px var(--font-text);

    --page-gutter: 16px;
    --section-space: 60px;
  }
}