/*
 * Design tokens — the ONLY file allowed to contain colour literals (npm run lint:css).
 * Values and reasons: dev/kit/30-design-system/color.md, typography.md, tile.md,
 * launcher-layout.md. Sizes are rem from a 16px root; the px they came from is in each comment.
 * Light only, by decision (color.md): there is deliberately no dark block.
 */
:root {
  color-scheme: light;

  /* Colour — Chapel Cream, from belleamedream.org */
  --app-page: #FCF9EE;
  --app-surface: #FFFFFF;
  --app-text: #443C32;
  --app-text-rgb: 68, 60, 50;
  --app-text-muted: #7A685A;
  --app-accent: #B57875;         /* decorative only: 3.37:1 on the page */
  --app-accent-deep: #7E4A47;    /* when the rose must carry meaning: focus, buttons */
  --app-on-accent: #FFFFFF;
  --app-line: rgba(var(--app-text-rgb), 0.13);         /* tile card edge */
  --app-line-strong: rgba(var(--app-text-rgb), 0.15);  /* picture outline */
  --app-scrim: rgba(var(--app-text-rgb), 0.35);        /* behind the install panel */
  --app-shadow: rgba(var(--app-text-rgb), 0.18);
  --app-clear: transparent;

  /* Type — Playfair Display + Montserrat */
  --app-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --app-font-body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --app-size-kicker: 0.59375rem;  /* 9.5px */
  --app-size-tile: 0.6875rem;     /* 11px */
  --app-size-small: 0.75rem;      /* 12px */
  --app-size-notice: 0.875rem;    /* 14px */
  --app-size-body: 0.9375rem;     /* 15px */
  --app-size-h2: 1.125rem;        /* 18px */
  --app-size-h1: 1.25rem;         /* 20px */
  --app-size-title: 1.4375rem;    /* 23px */

  /* Space & shape */
  --app-gap: 0.8125rem;           /* 13px — grid gap and padding */
  --app-mat: 0.4375rem;           /* 7px — the museum-plate mat */
  --app-radius: 0.5rem;           /* 8px */
  --app-tile-min: 12.5rem;        /* 200px — narrowest tile once there's room for more columns */
  --app-arch: 48% 48% var(--app-radius) var(--app-radius) / 30% 30% var(--app-radius) var(--app-radius);
}