/* ==========================================================================
   A Brazileira · design tokens · v1.0 (coming-soon, step 1 of the system)

   Three layers, read top to bottom:
     1. primitives   brand words for the house materials (raw values live ONLY here)
     2. semantic     roles the interface reads: Dia (default) and Noite
     3. illustration roles the entrance drawing reads (stone, wood, brass, light)
   site.css consumes layers 2 and 3 only.
   ========================================================================== */

/* ---- Fonts: self-hosted, OFL (licences in ../fonts/) -------------------- */
@font-face { font-family: "Cinzel"; src: url("../fonts/cinzel-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("../fonts/cinzel-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("../fonts/cinzel-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-latin-wght-normal.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }

/* Metric-matched fallbacks (measured with fontTools against Times metrics on
   the exact strings used), so the swap does not move the composition. */
@font-face { font-family: "Cinzel fallback"; src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"), local("Tinos"); font-weight: 400; size-adjust: 100.19%; ascent-override: 97.41%; descent-override: 37.13%; line-gap-override: 0%; }
@font-face { font-family: "Cinzel fallback"; src: local("Times New Roman Bold"), local("TimesNewRomanPS-BoldMT"), local("Liberation Serif Bold"), local("Tinos Bold"); font-weight: 600; size-adjust: 97.12%; ascent-override: 100.49%; descent-override: 38.3%; line-gap-override: 0%; }
@font-face { font-family: "Cinzel fallback"; src: local("Times New Roman Bold"), local("TimesNewRomanPS-BoldMT"), local("Liberation Serif Bold"), local("Tinos Bold"); font-weight: 700; size-adjust: 105.16%; ascent-override: 92.81%; descent-override: 35.38%; line-gap-override: 0%; }
@font-face { font-family: "Cormorant fallback"; src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"), local("Tinos"); size-adjust: 97.1%; ascent-override: 95.16%; descent-override: 29.56%; line-gap-override: 0%; }

:root {
  /* ==== 1. Primitives ===================================================== */
  /* house materials, sampled from the brand boards */
  --papel: #F9F0E9;          /* paper; lime plaster in daylight          */
  --areia: #F0DFCF;          /* sand                                     */
  --pedra: #DECDBD;          /* limestone                                */
  --oliva: #72692E;          /* olive                                    */
  --azulejo: #6F7A4A;        /* green glazed tile                        */
  --castanho: #804F1E;       /* chestnut                                 */
  --nogueira: #5F3819;       /* walnut                                   */
  --tinta: #2E1E14;          /* ink, near-black brown                    */
  --latao: #DB9E42;          /* brass: ornament by day, text by night    */
  /* derived for contrast and for night (all measured, see DESIGN.md) */
  --latao-marca: #A57638;    /* emblem brass on papel, close to the original logo (3.56:1) */
  --latao-texto: #83602C;    /* brass-hued small text on papel (5.08:1)  */
  --noite: #1C120B;          /* walnut night, never #000                 */
  --linho: #F3E6D6;          /* linen: text on noite (14.99:1)           */
  --linho-escuro: #C2AE96;   /* secondary text on noite (8.58:1)         */
  --luz-nucleo: #FFF2D6;     /* lamplight: core                          */
  --luz: #F4C978;            /* lamplight: body                          */
  --luz-borda: #B9782C;      /* lamplight: falloff                       */
  --barro: #9E3B1E;          /* terracotta (handmade ceramics): form errors on the hall surface */

  /* ---- Type -------------------------------------------------------------- */
  --font-display: "Cinzel", "Cinzel fallback", "Trajan Pro", "Times New Roman", serif;          /* logo lockup only */
  --font-text: "Cormorant Garamond", "Cormorant fallback", "EB Garamond", Garamond, "Times New Roman", serif;
  /* lockup: one size, the rest are ratios of the original logo */
  --size-wordmark: clamp(1.75rem, min(1.05rem + 2.75vw, 6.4svh), 3.5rem);   /* 28 -> 56px */
  --lockup-kind: 0.5em;
  --lockup-place: 0.4em;
  --lockup-emblem: 2.9em;
  --track-wordmark: 0.045em;
  --track-kind: 0.12em;
  --track-place: 0.3em;
  /* reading text and interface */
  --size-lede: clamp(1.25rem, min(1.02rem + 0.95vw, 3.4svh), 1.75rem);       /* 20 -> 28px */
  --size-ui: 1rem;           /* 16px: Dia/Noite, PT/EN, status          */
  --size-small: 0.9375rem;   /* 15px: footer, form messages             */
  --size-cta: 1.125rem;      /* 18px: the one action, form fields, button */
  --size-title: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);   /* 28 -> 40px: section and page titles */
  --size-read: 1.125rem;     /* 18px: reading text (privacy notice)      */
  --leading-read: 1.5;
  --weight-text: 500;
  --leading-lockup: 1.05;
  --leading-lede: 1.32;
  --leading-ui: 1.25;
  --measure-lede: 21em;

  /* ---- Space: 4px base ----------------------------------------------------- */
  --space-1: 0.25rem;  /*   4 */
  --space-2: 0.5rem;   /*   8 */
  --space-3: 0.75rem;  /*  12 */
  --space-4: 1rem;     /*  16 */
  --space-5: 1.5rem;   /*  24 */
  --space-6: 2rem;     /*  32 */
  --space-7: 3rem;     /*  48 */
  --space-8: 4rem;     /*  64 */
  --space-9: 6rem;     /*  96 */
  --gutter: clamp(1.5rem, 0.75rem + 3.2vw, 4.5rem);   /* 24 -> 72 */
  --container: 86rem;                                 /* 1376 */
  --target: 2.75rem;                                  /* 44px  */
  --field: 3rem;                                      /* 48px: input and button height */
  --measure-form: 26rem;                              /* 416px: waiting-list column */
  --topbar-pad: max(var(--space-2), env(safe-area-inset-top));   /* top bar inset; the stage clears it */

  /* ---- Lines, shape, focus --------------------------------------------------- */
  --hairline: 1px;
  --radius-focus: 2px;       /* the only radius: focus ring corners      */
  --focus-width: 2px;
  --focus-offset: 3px;
  --line-w: 1.25px;          /* illustration contour (non-scaling)       */
  --line-w-fine: 0.75px;     /* illustration detail                       */

  /* ---- Motion -------------------------------------------------------------- */
  --dur-ui: 160ms;
  --dur-theme: 400ms;        /* Dia <-> Noite cross-fade                  */
  --dur-door: 1100ms;        /* doors ease ajar, once                     */
  --delay-door: 200ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-door: cubic-bezier(0.3, 0.1, 0.2, 1);
  --ajar-l: 41deg;
  --ajar-r: 27deg;
  --dur-press: 160ms;        /* button and link press: scale(0.97)      */
  --dur-state: 200ms;        /* form messages, tick                      */
  --dur-reveal: 700ms;       /* the waiting list rises in, once          */
  /* scroll sequence (site.js drives it; these are the values it reads) */
  --porta-run: 140svh;       /* scroll length of the pinned door sequence (wrapper = 100lvh + run) */
  --open-l: 47deg;           /* extra swing on scroll: left leaf 41 -> 88deg */
  --open-r: 55deg;           /* right leaf 27 -> 82deg                   */

  /* ---- Layers -------------------------------------------------------------- */
  --z-scene: 1;
  --z-chrome: 10;
  --z-skip: 100;

  /* ---- Breakpoints (reference; custom properties cannot drive @media) -----
     stack  portrait (phones and tablets): lockup, text, entrance at the foot
     split  landscape >= 37.5em (600px): text | entrance
     short  landscape, max-height 31.25em (500px): compact split
     tight  portrait, max-height 42.5em (680px): tighter rhythm            */

}

/* ==== 2 + 3 · Dia (default). [data-theme] also scopes a theme to any element
   (the styleguide shows both side by side); restate `color` where it is used. */
:root,
[data-theme="dia"] {
  color-scheme: light;
  --color-bg: var(--papel);
  --color-text-strong: var(--tinta);       /* 14.23:1 on papel */
  --color-text: var(--nogueira);           /*  9.03:1 */
  --color-text-muted: var(--castanho);     /*  6.11:1 */
  --color-accent-text: var(--latao-texto); /*  5.08:1 */
  --color-mark: var(--latao-marca);        /*  3.56:1, graphic */
  --color-ground: var(--nogueira);         /* floor line = illustration ink */
  --color-focus: var(--nogueira);          /*  9.03:1 */
  --color-selection: var(--areia);
  --color-surface: var(--areia);
  --color-hall: color-mix(in srgb, var(--latao) 22%, var(--papel));   /* the lit hall: waiting-list surface */

  /* ==== 3. Illustration · Dia: sepia ink and earth washes on paper (sun from the upper left) ==== */
  --i-ink: color-mix(in srgb, var(--tinta) 84%, var(--nogueira));
  --i-ink-bar: var(--i-ink);
  --i-ink-wood: var(--tinta);
  --i-ink-leaf: color-mix(in srgb, var(--tinta) 72%, var(--oliva));
  --i-ink-hall: color-mix(in srgb, var(--nogueira) 82%, var(--castanho));
  --i-iron: var(--tinta);
  --ink-o: 0.92;
  --ink-o2: 0.84;
  --ink-oh: 0.62;
  --ink-ox: 0.5;
  --ink-of: 0.72;
  --ink-ograin: 0.42;
  --w-wall: var(--areia);                                              --wo-wall: 0.62;
  --w-stone: color-mix(in srgb, var(--pedra) 80%, var(--latao));       --wo-stone: 0.55;
  --w-stone2: color-mix(in srgb, var(--pedra) 55%, var(--castanho));   --wo-stone2: 0.16;
  --w-shade: color-mix(in srgb, var(--castanho) 50%, var(--pedra));    --wo-shade: 0.3;
  --w-wood: var(--castanho);                                           --wo-wood: 0.8;
  --w-wood2: var(--nogueira);                                          --wo-wood2: 0.32;
  --w-wood-dk: var(--nogueira);                                        --wo-wood-dk: 0.5;
  --w-glass: color-mix(in srgb, var(--azulejo) 30%, var(--pedra));     --wo-glass: 0.42;
  --w-step: var(--areia);                                              --wo-step: 0.85;
  --w-riser: var(--pedra);                                             --wo-riser: 0.78;
  --w-pot: color-mix(in srgb, var(--castanho) 62%, var(--latao));      --wo-pot: 0.58;
  --w-potdk: var(--castanho);                                          --wo-potdk: 0.42;
  --w-soil: var(--nogueira);                                           --wo-soil: 0.8;
  --w-leaf1: var(--oliva);
  --w-leaf2: color-mix(in srgb, var(--azulejo) 70%, var(--oliva));
  --w-leaf3: color-mix(in srgb, var(--oliva) 55%, var(--nogueira));
  --wo-leaf: 0.6;
  --wo-mass: 0.3;
  --w-trunk: color-mix(in srgb, var(--nogueira) 62%, var(--pedra));   --wo-trunk: 0.6;
  --w-lglass: var(--areia);
  --w-lglass2: var(--pedra);
  --w-lamp: var(--castanho);
  --w-room: color-mix(in srgb, var(--nogueira) 72%, var(--tinta));     --wo-room: 0.8;
  --i-room-base: var(--papel);
  --w-hfloor: var(--pedra);                                            --wo-hfloor: 0.4;
  --w-htile: color-mix(in srgb, var(--nogueira) 40%, var(--pedra));    --wo-htile: 0.3;
  --w-hdado: var(--azulejo);                                           --wo-hdado: 0.2;
  --w-hdeep: color-mix(in srgb, var(--latao) 40%, var(--castanho));   --wo-hdeep: 0.3;
  --wo-hwin: 0.9;
  --wo-hpool: 0;
  --i-brass: var(--latao);
  --i-wood-shade: var(--nogueira);
  --light-core: var(--luz-nucleo);
  --light-mid: var(--luz);
  --light-edge: var(--luz-borda);
  --o-night: 0;              /* lamplight layers */
  --o-day: 1;                /* sun shadows, reflections */
  --o-turn: 0.22;            /* a leaf turned away from the sun reads darker */
  /* the hall once the doors open (HTML layers between the two svgs) */
  --i-hall-dawn: transparent;                                           /* the drawn hall is warm sepia, never grey: no bridge colour needed */
  --i-hall-light: var(--color-hall);                                    /* lime-washed hall in daylight */
  --i-spill: none;                                                      /* no lamplight by day */
}

/* The hall surface (waiting list, footer on the home page): lamplight in both themes, so it reads
   dark ink on a light ground whatever the theme. It re-points the semantic roles for its subtree. */
.surface-hall {
  color-scheme: light;
  --color-bg: var(--color-hall);
  --color-text-strong: var(--tinta);
  --color-text: var(--nogueira);
  --color-text-muted: var(--castanho);    /* 5.24:1 on the hall by day, 5.66:1 by night */
  --color-accent-text: var(--castanho);   /* latao-texto would be 4.36:1 here: not used for text on the hall */
  --color-focus: var(--nogueira);
  --color-ground: var(--nogueira);
  --color-selection: var(--areia);
  --color-field: var(--papel);
  --color-field-line: var(--nogueira);
  --color-error: var(--barro);
  --color-on-strong: var(--papel);       /* text on a tinta button */
}

/* Very wide screens: more air and scale, never more content. */
@media (min-width: 120em) { :root { font-size: 112.5%; } }   /* >= 1920 */
@media (min-width: 160em) { :root { font-size: 131.25%; } }  /* >= 2560 */

/* ==== Noite ================================================================
   Same block twice (generated from one source): the visitor's system
   preference, unless they chose Dia, and the manual choice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="dia"]) {
    color-scheme: dark;
    --color-bg: var(--noite);
    --color-text-strong: var(--linho);       /* 14.99:1 on noite */
    --color-text: var(--linho);
    --color-text-muted: var(--linho-escuro); /*  8.58:1 */
    --color-accent-text: var(--latao);       /*  7.87:1 */
    --color-mark: var(--latao);
    --color-ground: color-mix(in srgb, var(--pedra) 46%, var(--noite));   /* 3.41:1, floor line */
    --color-focus: var(--latao);
    --color-selection: color-mix(in srgb, var(--latao) 28%, var(--noite));
    --color-surface: color-mix(in srgb, var(--pedra) 10%, var(--noite));
    --color-hall: color-mix(in srgb, var(--luz-nucleo) 72%, var(--luz));   /* lamplight: waiting-list surface */

    /* the same drawing on the walnut night paper: light ink, dark earth washes, glazes of lamplight */
    --i-ink: color-mix(in srgb, var(--pedra) 58%, var(--noite));
    --i-ink-bar: color-mix(in srgb, var(--tinta) 60%, var(--noite));
    --i-ink-wood: color-mix(in srgb, var(--pedra) 46%, var(--noite));
    --i-ink-leaf: color-mix(in srgb, var(--pedra) 44%, var(--noite));
    --i-ink-hall: color-mix(in srgb, var(--luz-borda) 62%, var(--nogueira));
    --i-iron: color-mix(in srgb, var(--tinta) 55%, var(--noite));
    --ink-o: 0.9;
    --ink-o2: 0.8;
    --ink-oh: 0.55;
    --ink-ox: 0.42;
    --ink-of: 0.66;
    --ink-ograin: 0.35;
    --w-wall: var(--pedra);           --wo-wall: 0.035;
    --w-stone: var(--pedra);          --wo-stone: 0.1;
    --w-stone2: var(--pedra);         --wo-stone2: 0.04;
    --w-shade: var(--noite);          --wo-shade: 0;
    --w-wood: var(--castanho);        --wo-wood: 0.34;
    --w-wood2: var(--noite);          --wo-wood2: 0.35;
    --w-wood-dk: var(--noite);        --wo-wood-dk: 0.45;
    --w-glass: var(--latao);          --wo-glass: 0.4;
    --w-step: var(--pedra);           --wo-step: 0.1;
    --w-riser: var(--pedra);          --wo-riser: 0.05;
    --w-pot: var(--castanho);         --wo-pot: 0.32;
    --w-potdk: var(--noite);          --wo-potdk: 0.4;
    --w-soil: var(--noite);           --wo-soil: 0.8;
    --w-leaf1: var(--oliva);
    --w-leaf2: var(--azulejo);
    --w-leaf3: color-mix(in srgb, var(--oliva) 60%, var(--noite));
    --wo-leaf: 0.5;
    --wo-mass: 0.12;
    --w-trunk: var(--pedra);          --wo-trunk: 0.12;
    --w-lglass: var(--luz-nucleo);
    --w-lglass2: var(--luz);
    --w-lamp: var(--nogueira);
    --w-room: var(--noite);           --wo-room: 0;
    --i-room-base: color-mix(in srgb, var(--luz-borda) 34%, var(--noite));
    --w-hfloor: var(--luz-borda);     --wo-hfloor: 0.32;
    --w-htile: var(--nogueira);       --wo-htile: 0.18;
    --w-hdado: var(--azulejo);        --wo-hdado: 0.16;
    --w-hdeep: var(--nogueira);       --wo-hdeep: 0.32;
    --wo-hwin: 0;
    --wo-hpool: 0;
    --i-brass: var(--latao);
    --i-wood-shade: color-mix(in srgb, var(--castanho) 14%, var(--noite));
    --o-night: 1;
    --o-day: 0;
    --o-turn: 0;
    --i-hall-light: radial-gradient(farthest-corner at 50% 38%, var(--color-hall) 0%, var(--color-hall) 34%, var(--luz) 78%, var(--luz-borda) 100%);
    --i-hall-dawn: transparent;
  }
}
[data-theme="noite"] {
  color-scheme: dark;
  --color-bg: var(--noite);
  --color-text-strong: var(--linho);       /* 14.99:1 on noite */
  --color-text: var(--linho);
  --color-text-muted: var(--linho-escuro); /*  8.58:1 */
  --color-accent-text: var(--latao);       /*  7.87:1 */
  --color-mark: var(--latao);
  --color-ground: color-mix(in srgb, var(--pedra) 46%, var(--noite));   /* 3.41:1, floor line */
  --color-focus: var(--latao);
  --color-selection: color-mix(in srgb, var(--latao) 28%, var(--noite));
  --color-surface: color-mix(in srgb, var(--pedra) 10%, var(--noite));
  --color-hall: color-mix(in srgb, var(--luz-nucleo) 72%, var(--luz));   /* lamplight: waiting-list surface */

  /* the same drawing on the walnut night paper: light ink, dark earth washes, glazes of lamplight */
  --i-ink: color-mix(in srgb, var(--pedra) 58%, var(--noite));
  --i-ink-bar: color-mix(in srgb, var(--tinta) 60%, var(--noite));
  --i-ink-wood: color-mix(in srgb, var(--pedra) 46%, var(--noite));
  --i-ink-leaf: color-mix(in srgb, var(--pedra) 44%, var(--noite));
  --i-ink-hall: color-mix(in srgb, var(--luz-borda) 62%, var(--nogueira));
  --i-iron: color-mix(in srgb, var(--tinta) 55%, var(--noite));
  --ink-o: 0.9;
  --ink-o2: 0.8;
  --ink-oh: 0.55;
  --ink-ox: 0.42;
  --ink-of: 0.66;
  --ink-ograin: 0.35;
  --w-wall: var(--pedra);           --wo-wall: 0.035;
  --w-stone: var(--pedra);          --wo-stone: 0.1;
  --w-stone2: var(--pedra);         --wo-stone2: 0.04;
  --w-shade: var(--noite);          --wo-shade: 0;
  --w-wood: var(--castanho);        --wo-wood: 0.34;
  --w-wood2: var(--noite);          --wo-wood2: 0.35;
  --w-wood-dk: var(--noite);        --wo-wood-dk: 0.45;
  --w-glass: var(--latao);          --wo-glass: 0.4;
  --w-step: var(--pedra);           --wo-step: 0.1;
  --w-riser: var(--pedra);          --wo-riser: 0.05;
  --w-pot: var(--castanho);         --wo-pot: 0.32;
  --w-potdk: var(--noite);          --wo-potdk: 0.4;
  --w-soil: var(--noite);           --wo-soil: 0.8;
  --w-leaf1: var(--oliva);
  --w-leaf2: var(--azulejo);
  --w-leaf3: color-mix(in srgb, var(--oliva) 60%, var(--noite));
  --wo-leaf: 0.5;
  --wo-mass: 0.12;
  --w-trunk: var(--pedra);          --wo-trunk: 0.12;
  --w-lglass: var(--luz-nucleo);
  --w-lglass2: var(--luz);
  --w-lamp: var(--nogueira);
  --w-room: var(--noite);           --wo-room: 0;
  --i-room-base: color-mix(in srgb, var(--luz-borda) 34%, var(--noite));
  --w-hfloor: var(--luz-borda);     --wo-hfloor: 0.32;
  --w-htile: var(--nogueira);       --wo-htile: 0.18;
  --w-hdado: var(--azulejo);        --wo-hdado: 0.16;
  --w-hdeep: var(--nogueira);       --wo-hdeep: 0.32;
  --wo-hwin: 0;
  --wo-hpool: 0;
  --i-brass: var(--latao);
  --i-wood-shade: color-mix(in srgb, var(--castanho) 14%, var(--noite));
  --o-night: 1;
  --o-day: 0;
  --o-turn: 0;
  --i-hall-light: radial-gradient(farthest-corner at 50% 38%, var(--color-hall) 0%, var(--color-hall) 34%, var(--luz) 78%, var(--luz-borda) 100%);
  --i-hall-dawn: transparent;
}