/* Layer order is repeated in every file: browsers use the first declaration they see, and files load alphabetically. */
@layer tokens, base, components, pages;

@layer tokens {
  :root {
    /* Colour */
    --teal: #1F4A45;
    --teal-deep: #143532;
    --teal-soft: #2B5B55;
    --on-teal: #FAF6F1;
    --on-teal-muted: #D3E0DC;

    --peach: #F3D5C0;
    --peach-line: #D9AF93;
    --on-peach-muted: #3E3A34;
    --rust: #7E3A20;

    --sage: #DCE5DC;
    --on-sage-muted: #2C3A37;

    --cream: #FAF6F1;
    --paper: #FFFFFF;
    --line: #DDD3C6;
    --track: #E6DED4;

    --ink: #1D2B29;
    --ink-soft: #2C3A37;
    --muted: #4F5E5B;

    --error: #9B2C1F;
    --focus: #C2410C;

    /* Type */
    --font-display: "Young Serif", Georgia, serif;
    --font-text: "Atkinson Hyperlegible Next", system-ui, sans-serif;

    --text-sm: 0.875rem;   /* 14 */
    --text-base: 1.0625rem; /* 17 */
    --text-lg: 1.1875rem;  /* 19 */
    --heading-sm: 1.4375rem; /* 23 */
    --heading-md: 1.75rem;  /* 28 */
    --heading-lg: 2.5rem;   /* 40 */

    /* Space and shape */
    --gutter: 1.375rem; /* 22 */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2.25rem;
    --space-xl: 3rem;

    --radius-sm: 12px;
    --radius-md: 14px;
    --radius-lg: 20px;

    --measure: 40rem;
    --tap: 44px;
  }
}