/* The Parq: design tokens. Source of truth for the identity page and the site.
   Colours sampled from the business's own photos and posters (see /identidade). */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-var.woff2") format("woff2");
  font-weight: 400 600;
  font-stretch: 100% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Hepta Slab";
  src: url("/assets/fonts/hepta-slab-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* principal: the seal */
  --carvao: #171513;
  --marmore: #EEEAE0;
  /* apoio */
  --verde: #414B32;
  --ambar: #C9A574;
  /* neutros */
  --metal: #5C5D58;
  --grafite: #2A2825;
  --veio: #CFC9B8;
  --cinza: #A8A397;
  --papel: #F6F3EC;

  /* roles, light surface */
  --bg: var(--marmore);
  --surface: var(--papel);
  --ink: var(--carvao);
  --ink-2: var(--metal);
  --rule: var(--veio);
  --focus: var(--verde);
  --action-bg: var(--carvao);
  --action-ink: var(--marmore);

  /* type */
  --sans: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --display: "Hepta Slab", ui-serif, Georgia, serif;
  --fs-display: clamp(2.375rem, 1.5rem + 4vw, 4rem);
  --fs-h2: clamp(1.75rem, 1.3rem + 2vw, 2.625rem);
  --fs-h3: 1.25rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;
  --lh-tight: 1.06;
  --lh-body: 1.6;
  --track-label: 0.12em;
  --wide: 125%;

  /* space: 4 px base, wider steps as it grows */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --gutter: clamp(16px, 5vw, 24px);   /* 16 at 320, 20 at 390, 24 from 480 */
  --measure: 62ch;

  /* shape */
  --radius-0: 0;
  --radius-pill: 999px;
  --rule-w: 1px;
  --frame-pad: 10px;      /* passe-partout around a photo */
  --frame-inset: 8px;     /* the inner filet, echoing the inline of the letters */

  /* motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-move: cubic-bezier(0.77, 0, 0.175, 1);
  --t-press: 120ms;
  --t-hover: 180ms;
  --t-move: 240ms;
  --t-menu-in: 340ms;     /* the phone menu drops out from under the bar */
  --t-menu-out: 200ms;    /* and goes back up the same way, faster */
  --t-menu-step: 30ms;    /* between one menu row and the next */
  /* page motion: the opening of each page and the reveals along it (marketing pace, longer than UI) */
  --t-open: 760ms;        /* page title settles */
  --t-reveal: 640ms;      /* a block rises into place */
  --t-curtain: 900ms;     /* a photo opens from the bottom */
  --t-count: 900ms;       /* 80 and 65 count up */
  --t-stagger: 55ms;      /* between siblings, capped at 8 steps */
  --tap: 44px;
}

@media (min-width: 768px) { :root { --gutter: 32px; --fs-body: 1.0625rem; } }
@media (min-width: 1200px) { :root { --gutter: 48px; } }

/* a dark surface flips the roles; the seal colours swap */
.surface-dark {
  --bg: var(--carvao);
  --surface: var(--grafite);
  --ink: var(--marmore);
  --ink-2: var(--cinza);
  --rule: var(--grafite);
  --focus: var(--ambar);
  --action-bg: var(--marmore);
  --action-ink: var(--carvao);
  background: var(--bg);
  color: var(--ink);
}
.surface-verde {
  --bg: var(--verde);
  --ink: var(--marmore);
  --ink-2: var(--veio);
  --rule: #5A6449;
  --focus: var(--ambar);
  --action-bg: var(--marmore);
  --action-ink: var(--carvao);
  background: var(--bg);
  color: var(--ink);
}

/* text selection and the caret, from the palette instead of the browser blue:
   verde under mármore text on light surfaces (7,68:1), âmbar under carvão on the dark and green ones (7,91:1).
   Written per surface, not through the role variables, so every engine resolves them the same way. */
::selection { background: var(--verde); color: var(--marmore); }
.surface-dark ::selection, .surface-dark::selection,
.surface-verde ::selection, .surface-verde::selection { background: var(--ambar); color: var(--carvao); }
:root { caret-color: var(--verde); }
.surface-dark, .surface-verde { caret-color: var(--ambar); }
input, textarea { caret-color: var(--verde); }

@media (prefers-reduced-motion: reduce) {
  :root { --t-press: 0ms; --t-hover: 0ms; --t-move: 0ms; }
}