/* Fábrica de bolos do Alto de Santo Amaro · design tokens
   Source of truth: brand/tokens.json. Every colour is sampled from the house's own material:
   the Instagram avatar (noite, gema), the facade at night (parede, letreiro, tinta), the tiles
   behind the counter (azulejo). Contrast pairs are listed in tokens.json and on /identidade/. */

/* Ranade, Indian Type Foundry, ITF Free Font License 2.0: the official WOFF2 from Fontshare,
   unmodified (the licence forbids subsetting and conversion). Licensee: whoever runs the site. */
@font-face {
  font-family: "Ranade";
  src: url("/assets/fonts/Ranade-Variable.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* principal */
  --noite: #201B21;        /* avatar background: the page at night */
  --gema: #F9CD10;         /* the custard: the one accent, primary action */
  --acucar: #F4F0E8;       /* text on noite, light paper */

  /* apoio */
  --parede: #A3551C;       /* the ochre wall under the street lamp */
  --letreiro: #E68449;     /* the lit sign over the door */
  --tinta: #482221;        /* the sign's lettering; only on letreiro */
  --azulejo: #E7E2D8;      /* the tiles behind the counter: light sections */

  /* neutros */
  --noite-2: #2B252C;      /* raised surface, photo mount on noite */
  --filete: #4A414B;       /* 1px rules on noite */
  --nevoa: #B4ABB1;        /* secondary text on noite (7.6:1) */
  --pedra: #5E5852;        /* secondary text on acucar/azulejo (6.2 / 5.4:1) */
  --filete-claro: #CFC8BB; /* 1px rules on acucar/azulejo */

  /* type */
  /* one family: bold for the seal, headings and hours; regular and medium for text */
  --f-display: "Ranade", sans-serif;
  --f-text: "Ranade", sans-serif;
  --wt-display: 700;
  --t-horas: clamp(4rem, 1.4rem + 11vw, 9.5rem);
  --t-display: clamp(2.5rem, 1.5rem + 4.4vw, 4.75rem);
  --t-h2: clamp(1.875rem, 1.35rem + 2.2vw, 3rem);
  --t-h3: clamp(1.25rem, 1.12rem + 0.6vw, 1.5rem);
  --t-lead: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  --t-body: 1.125rem;
  --t-small: 0.9375rem;
  --t-label: 0.8125rem;
  --track-label: 0.14em;

  /* space: tight inside a block, wide between blocks */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 72px;
  --s-9: 112px;
  --s-10: 160px;
  --gutter: clamp(16px, 4vw, 48px);
  --measure: 62ch;

  /* shape: rectangles from the facade, circles from the nata */
  --r-0: 0;
  --r-round: 50%;

  /* depth: none. Separation is colour blocks and 1px rules. */

  /* motion: ease-out for reactions, expo for long travel, in-out for wipes that move on screen */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-in: cubic-bezier(.55, 0, .75, .2);
  --dur-1: 140ms;
  --dur-2: 220ms;
  --dur-draw: 1100ms;

  color-scheme: dark;
}

/* text selection in the brand colours, never the browser blue: gema on the night, noite on light paper,
   and the inverse on the yellow surfaces so a selection on them still shows */
::selection { background: var(--gema); color: var(--noite); }
.banda-azulejo ::selection, .superficie-acucar ::selection, .superficie-azulejo ::selection { background: var(--noite); color: var(--gema); }
.btn-gema::selection, .btn-gema ::selection, .grupo-nome::selection, .grupo-nome ::selection,
.cor[style*="F9CD10"] ::selection, .aa-gema ::selection { background: var(--noite); color: var(--gema); }
.banda-letreiro ::selection { background: var(--tinta); color: var(--letreiro); }

/* opening another page of the site: a short cross-fade, where the browser supports it */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; animation-timing-function: var(--ease-out); }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }