/* The design rules as values: docs/DESIGN-RULES.md. Both sites load this before their own
 * stylesheet, frugal.co through partials/head-base.html and /resources from each page's head.
 * A value changes here and in that document together. A new colour needs a named owner's
 * decision, never one page's fix. */
:root {
  /* Colour: the palette, and nothing else */
  --white: #FFFFFF;
  --beige: #F2F0EA;        /* surfaces, every alternating section, heroes */
  --beige-2: #D5D4CE;      /* hairlines; subtext on dark */
  --beige-dark: #C0BFB9;
  --black: #000000;        /* primary text on light; primary button */
  --off-black: #212121;    /* text on light; footer and dark surfaces */
  --off-black-2: #2F2F2F;  /* secondary text at any size */
  --mid-grey: #7D7D7D;     /* text at 24 px and up only */
  --green: #00CE3E;        /* spot colour and fills; never text on light; black text only on it */
  --green-dark: #014715;   /* surface, and all green text on light */
  --mint: #DFF1DF;         /* the only pale green surface (extension, decision 7) */
  --error: #B42318;        /* form errors (extension) */

  /* Type */
  --font-display: "Aeonik", Arial, sans-serif;  /* weight 500 only */
  --font-body: "Inter", Arial, sans-serif;      /* 600 and 700; 400 for long reading only */
  --font-mono: "Google Sans Code", ui-monospace, monospace;
  --weight-body: 600;       /* Inter body text; 400 on long-reading pages (body.long-read) */
  --tracking: -0.02em;
  --tracking-eyebrow: 0.04em;

  /* Shape */
  --radius-control: 8px;   /* buttons and small chrome */
  --radius-nested: 12px;   /* nested cards */
  --radius-card: 16px;     /* section cards */
  --radius-pill: 999px;

  /* Space: 4, 8, 12, 16, 24, 32, 40, 48, 64, 80, 100 and nothing else */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-100: 100px;
  --section: 80px;         /* above and below a section's content */
  --gutter: 80px;          /* page edge to content, in line with the logo */

  /* Motion: hover and press feedback */
  --duration: 200ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (max-width: 479px) {
  :root {
    --section: 48px;
    --gutter: 24px;
  }
}

/* Legal pages and long articles: Inter Regular for reading (decision 2). */
body.long-read {
  --weight-body: 400;
}

/* Reduced motion turns motion off on both sites (docs/DESIGN-RULES.md, Motion). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}