/* Theme contract. Every custom property a component reads is declared here with a neutral
   default, so the package renders coherently on its own. A consuming site overrides these —
   and only these — to apply its own brand. Nothing structural lives in this file.

   Load order matters: theme.css, then your own theme, then base.css. */

:root {
  /* Ground and surfaces */
  --paper:      #FFFFFF;
  --paper-2:    #F4F4F5;
  --stone:      #E8E8EA;
  --line:       #E2E2E5;
  --line-2:     #C9C9CE;

  /* Brand — named for the role each plays, not for a colour some site happens to put in it.
     --brand is the dark ground (dark buttons, dark sections, footer); --accent carries
     emphasis (focus ring, link hover); --accent-soft is the accent legible on --brand. */
  --brand:       #1F2937;
  --brand-deep:  #111827;
  --accent:      #2563EB;
  --accent-soft: #60A5FA;

  /* Text */
  --ink:        #18181B;
  --muted:      #52525B;
  --muted-2:    #71717A;

  /* Type */
  --serif: Georgia, "Times New Roman", serif;
  --sans:  system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Scale — fluid, so 150% browser font size does not break the layout (SC-005) */
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.25vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.10rem + 0.50vw, 1.44rem);
  --step-2:  clamp(1.44rem, 1.25rem + 0.95vw, 2.07rem);
  --step-3:  clamp(1.73rem, 1.40rem + 1.65vw, 2.98rem);
  --step-4:  clamp(2.07rem, 1.50rem + 2.85vw, 4.29rem);

  --measure: 62ch;
  --radius: 3px;
  --gutter: clamp(1.25rem, 4vw, 3.75rem);
}