/* Design tokens: direção A, "Cera e linho" com uma assinatura minhota
   (docs/especificacao.md §6, docs/plano.md 10.3).
   Change the visual identity here; main.css only uses these variables. */

@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url("/fonts/work-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Colours */
  --color-linen: #f4efe7;           /* linho: page background */
  --color-sand: #dccdb6;            /* areia: surfaces, borders */
  --color-sage: #9caa90;            /* sálvia: decorative only (2.1:1 on linen) */
  --color-terracotta: #b47c5e;      /* terracota: decorative only (3.1:1 on linen) */
  --color-terracotta-dark: #8f5a3f; /* terracota escura: text, links, buttons (5.0:1) */
  --color-charcoal: #302a25;        /* carvão: text (12.4:1 on linen) */
  --color-paper: #fbf8f3;           /* papel: raised surfaces (cards, panels) */
  --color-wax: #ede6da;             /* cera: alternate section bands; terracota escura 4.6:1 */
  --color-muted: #5f544b;           /* secondary text: 6.4:1 on linen, 5.9:1 on cera */
  --color-sage-light: #dfe5d8;      /* "Disponível" label background (charcoal 11.0:1) */
  --color-sage-dark: #4f5d45;       /* sálvia escura: the dot on that label (5.5:1) */

  /* Signature: the striped Minho cloth from the owner's photos (red with
     thin yellow, green, white and navy threads). Decorative only, and used
     in three places at most: the header and footer edges and behind the
     home photo. */
  --minhoto-red: #a8322d;
  --minhoto-yellow: #d9a52b;
  --minhoto-green: #3d7a4f;
  --minhoto-navy: #2a3352;
  --minhoto-white: #f4efe7;
  --minhoto-stops:
    var(--minhoto-red) 0 14px,
    var(--minhoto-yellow) 14px 16px,
    var(--minhoto-red) 16px 22px,
    var(--minhoto-green) 22px 25px,
    var(--minhoto-red) 25px 31px,
    var(--minhoto-white) 31px 32px,
    var(--minhoto-navy) 32px 35px,
    var(--minhoto-white) 35px 36px,
    var(--minhoto-red) 36px 50px;

  /* Typography. rem follows the visitor's font-size setting. */
  --font-heading: "Fraunces", Georgia, serif;
  --font-body: "Work Sans", system-ui, sans-serif;
  --text-small: 1rem;               /* decorative labels and captions only */
  --text-label: 1.0625rem;          /* 17px, the spec's minimum: short text that informs (menu, status) */
  --text-base: 1.125rem;            /* 18px */
  --text-lead: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-large: 1.375rem;
  --text-h2: clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem);
  --text-h1: clamp(2.25rem, 1.6rem + 3vw, 3.75rem);
  --text-numeral: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  --line-height: 1.6;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: 4rem;
  --space-section: clamp(4rem, 2.5rem + 6vw, 7rem); /* between page sections */

  /* Shape and layout */
  --radius: 4px;                    /* barely rounded corners */
  --shadow: 0 2px 8px rgb(48 42 37 / 25%); /* carvão at 25% */
  --shadow-soft: 0 1px 2px rgb(48 42 37 / 6%), 0 8px 24px rgb(48 42 37 / 8%);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --tap-min: 3rem;                  /* 48px touch targets (minimum is 44px) */
  --bar-clearance: 5rem;            /* WhatsApp bar (about 4rem tall) plus a little air */
  --content-width: 68rem;
}