/* El Descanso — design tokens. The single place colors and type are defined.
   Palette is derived from the logo: the red clay roof tiles (#E92C2D) and the
   near-black wordmark (#1A1A1A). The site is dark throughout (PLAN.md D13):
   white type on warm near-black, the way the cocktail photography was shot.
   styles.css only ever uses the semantic names below the palette. */

:root {
  /* --- palette: brand red, from the roof tiles ---------------------------- */
  --clay-500: #E92C2D;   /* the logo red. Stars, marks, large display type. */
  --clay-600: #D62828;   /* button fills, under white text: 4.7:1 */
  --clay-700: #A81F1C;   /* hover / pressed */

  /* --- palette: ink and white -------------------------------------------- */
  --ink-950: #1A1613;    /* warm near-black, the wordmark's family */
  --white:   #FFFFFF;    /* the type color */

  /* --- surfaces ------------------------------------------------------------ */
  --surface:      var(--ink-950);         /* the page */
  --surface-alt:  #221D19;                /* alternate sections, a shade up */
  --surface-deep: #0F0D0B;                /* bar, contact band, footer */
  --line:         rgba(255,255,255,.14);
  --tint:         rgba(233,44,45,.14);    /* today's row, pending notes */

  /* --- text, on those surfaces --------------------------------------------- */
  --text-strong: var(--white);            /* headings, names, prices */
  --text:        rgba(255,255,255,.80);   /* body, 11:1 */
  --text-muted:  rgba(255,255,255,.58);   /* notes, captions, 6:1 */
  --accent:      #F26B6B;                 /* links and eyebrows: the red,
                                             lifted so it reads on ink, 5.7:1 */

  /* --- state -------------------------------------------------------------- */
  --open:    #7BE3A6;
  --closed:  #FF9F9C;

  /* --- WhatsApp button ----------------------------------------------------- */
  --whatsapp: #1B7F4C;   /* darker than WhatsApp's own #25D366, which is
                            2:1 under white text; this is 5:1, AA. */

  /* --- Waze button --------------------------------------------------------- */
  --waze:     #33CCFF;   /* Waze's own cyan. Too light for white text (1.9:1),
                            so it carries dark ink instead: 9:1, AA. */
  --waze-ink: var(--ink-950);

  /* --- type --------------------------------------------------------------- */
  --font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* mobile-first scale; the display steps grow with the viewport */
  --step--1: 0.875rem;
  --step-0:  1rem;
  --step-1:  1.125rem;
  --step-2:  1.375rem;
  /* Below ~400px it shrinks with the screen (8.2vw), so the section titles
     the operator wants on one line («Lo que dicen en Google») still fit a
     320px phone. Above that, unchanged. */
  --step-3:  clamp(1.5rem, min(1.4rem + 2.6vw, 8.2vw), 3.5rem);
  --step-4:  clamp(2.75rem, 1.4rem + 5.8vw, 6.25rem);   /* hero only */

  /* --- space -------------------------------------------------------------- */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8rem;

  --header-h: 64px;        /* the fixed header; the hero pulls up under it */

  --radius: 10px;
  --radius-lg: 16px;
  --measure: 34rem;        /* readable line length */
  --shell: 72rem;          /* page max width */
}