/* ============================================================
   LAYER 1 — SETTINGS
   Design tokens for Mesa del Azar. Nothing here emits CSS
   beyond custom properties on :root.
   ============================================================ */

:root {
  /* Colour ------------------------------------------------- */
  --c-page: #f4f4f7;
  --c-tile: #ffffff;
  --c-band: #ebebf1;
  --c-band-deep: #14141a;
  --c-ink: #14141a;
  --c-ink-70: #4a4a55;
  --c-ink-55: #6d6d79;
  --c-hairline: #dcdce4;
  --c-hairline-soft: #e7e7ee;
  --c-accent: #d6006e;
  --c-accent-deep: #a80057;
  --c-accent-tint: #fdeaf3;
  --c-on-dark: #f4f4f7;
  --c-on-dark-dim: #a6a6b4;

  /* Spacing scale (4 / 8 based) ---------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* Type --------------------------------------------------- */
  --font-sans: "Manrope", "Helvetica Neue", Arial, system-ui, -apple-system, sans-serif;
  --fs-micro: 0.6875rem;   /* 11px */
  --fs-small: 0.8125rem;   /* 13px */
  --fs-base: 1rem;         /* 16px */
  --fs-lead: 1.125rem;     /* 18px */
  --fs-h4: 1.25rem;        /* 20px */
  --fs-h3: 1.5rem;         /* 24px */
  --fs-h2: 2rem;           /* 32px */
  --fs-h1: 2.75rem;        /* 44px */
  --fs-display: 3.5rem;    /* 56px */
  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-body: 1.65;

  /* Shape and depth ---------------------------------------- */
  --radius-tile: 14px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --hairline: 1px solid var(--c-hairline);
  --press: 4px 4px 0 var(--c-ink);
  --press-accent: 4px 4px 0 var(--c-accent-deep);

  /* Layout ------------------------------------------------- */
  --wrap: 1180px;
  --wrap-narrow: 760px;

  /* Motion ------------------------------------------------- */
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}