/* Mob Check design tokens. Every colour, size and radius used by the
   interface comes from here so the theme can be changed in one place.
   Contrast ratios are checked by tools/contrast.mjs. */
:root {
  /* Colour */
  --color-bg: #FAF7F0;          /* warm ivory */
  --color-surface: #FFFFFF;
  --color-primary: #173E35;     /* deep eucalyptus green: main text and buttons */
  --color-primary-hover: #0F2D26;
  --color-clay: #B86442;        /* accent: icons, borders, large text only (3.97:1 on ivory) */
  --color-clay-text: #8F4A2E;   /* clay that passes 4.5:1 for small text */
  --color-gold: #D5AE61;        /* decorative only, never for text */
  --color-sage: #E3E8DD;
  --color-peach: #F3DFD0;
  --color-sand: #F2E5C9;
  --color-text: #173E35;
  --color-text-secondary: #52635B;
  --color-border: #DEDCD3;
  --color-border-strong: #7A847D; /* form outlines need 3:1 against the background */
  --color-on-primary: #FFFFFF;
  --color-error: #A3322A;
  --color-error-bg: #FBE9E6;
  --color-success-bg: #E3E8DD;
  --color-quiet: #EEEBE4;       /* sorry business notices */
  --color-focus: #173E35;

  /* Type */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text-sm: 0.9375rem;   /* 15px: captions only */
  --text-body: 1.0625rem; /* 17px */
  --text-lg: 1.125rem;    /* 18px */
  --text-title: 1.25rem;  /* card titles */
  --text-heading: 1.625rem; /* 26px screen headings */
  --text-welcome: 2.125rem; /* 34px */
  --line: 1.45;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --gutter: 20px;

  /* Shape */
  --radius-card: 20px;
  --radius-button: 16px;
  --radius-input: 12px;
  --radius-pill: 999px;

  /* Sizing */
  --touch: 48px;
  --button-height: 56px;
  --nav-height: 68px;
  --content-max: 560px;

  /* Motion */
  --motion-fast: 160ms;
  --motion-base: 220ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  --shadow-card: 0 1px 2px rgba(23, 62, 53, 0.06), 0 4px 16px rgba(23, 62, 53, 0.06);
}

@media (min-width: 400px) {
  :root { --gutter: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0ms; --motion-base: 0ms; }
}

/* Settings > Reduce motion overrides the system preference */
:root[data-reduce-motion="true"] { --motion-fast: 0ms; --motion-base: 0ms; }

/* Settings > Text size multiplies the person's own browser/system size */
:root[data-text-size="large"] { font-size: 112.5%; }
:root[data-text-size="larger"] { font-size: 125%; }
:root[data-text-size="largest"] { font-size: 140%; }