/* ==========================================================================
   Coffee Psycho Therapy — design tokens
   --------------------------------------------------------------------------
   Every value below is derived from the café's own material, not invented:

     refs/real1.jpg   the storefront on Francouzská — cream sign board inside a
                      black fascia, roast-brown letterforms, white bistro chairs,
                      afternoon light through a lime tree.
     refs/menu2.jpg   the printed menu — cream paper, hairline rules, bold
                      condensed uppercase section labels, hand-drawn ink line art,
                      a rounded outline box around the add-ons.

   So: paper = the sign board. ink = the fascia. brand = the lettering.
   Rules are hairlines, corners are nearly square, shadows are almost absent —
   because the source material is printed, not glassy.

   Change a value here and it changes everywhere. Do not hard-code colours,
   sizes or timings anywhere else.
   ========================================================================== */

:root {

  /* ---------------------------------------------------------------- colour */
  /* Surfaces — three warm cream steps, lightest to deepest.                  */
  --paper:            oklch(97.2% 0.012 84);
  --paper-warm:       oklch(94.2% 0.018 82);
  --paper-deep:       oklch(90.8% 0.022 80);

  /* Rules — the printed menu's hairlines.                                    */
  --rule:             oklch(87% 0.019 82);
  --rule-strong:      oklch(63.5% 0.028 74);

  /* Ink — the black fascia above the window, and its softer voices.          */
  --ink:              oklch(22.5% 0.014 60);
  --ink-soft:         oklch(43% 0.026 66);   /* secondary body text           */
  --ink-faint:        oklch(49.5% 0.024 70); /* captions, meta — AA on all 3 papers */

  /* Type on ink surfaces (footer, closing band).                             */
  --on-ink:           oklch(95% 0.012 84);
  --on-ink-soft:      oklch(79% 0.019 82);

  /* Brand — the roast-brown lettering on the sign. Used sparingly:           */
  /* links, active state, the one accent that means "this is us".             */
  --brand:            oklch(51% 0.106 58);
  --brand-deep:       oklch(41% 0.088 55);
  --brand-tint:       oklch(94.5% 0.026 68);
  /* The accent, lightened, for use *on* ink surfaces. --brand itself only     */
  /* reaches 2.9:1 against the fascia, so it must never be text on dark.       */
  --brand-light:      oklch(78.5% 0.088 62);

  /* State — open / closed status only. Nothing else may use these.           */
  --open-ink:         oklch(38% 0.09 150);
  --open-bg:          oklch(94% 0.035 150);
  --closed-ink:       oklch(41% 0.1 40);
  --closed-bg:        oklch(94% 0.03 45);

  --focus:            oklch(45% 0.13 58);

  /* ------------------------------------------------------------------ type */
  /* Two voices, both taken from the café's own printing:                     */
  /*   display  the sign — a fine old-style serif, widely tracked             */
  /*   body     the menu — a humanist grotesque; its condensed width does     */
  /*            the menu's uppercase section labels                           */
  --font-display:   "Cormorant Garamond", "Cormorant Fallback", "Times New Roman", Georgia, serif;
  --font-body:      "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-condensed: "Barlow Condensed", "Barlow Condensed Fallback", "Arial Narrow", sans-serif;

  /* 1.25 major third. Fluid only where a heading has to survive a phone.     */
  --text-2xs:  0.75rem;
  --text-xs:   0.8125rem;
  --text-sm:   0.9375rem;
  --text-base: 1.0625rem;
  --text-md:   1.25rem;
  --text-lg:   1.5625rem;
  --text-xl:   1.953rem;
  --text-2xl:  2.441rem;
  --text-3xl:  3.052rem;

  --text-h1:      clamp(2.15rem, 1.35rem + 3.4vw, 3.4rem);
  --text-h2:      clamp(1.7rem, 1.3rem + 1.7vw, 2.441rem);
  --text-h3:      clamp(1.2rem, 1.08rem + 0.5vw, 1.4rem);
  --text-wordmark: clamp(1.3rem, 1.05rem + 1.1vw, 1.85rem);
  --text-figure:  clamp(3.2rem, 2.2rem + 4vw, 5rem);

  --leading-tight: 1.12;
  --leading-snug:  1.35;
  --leading-body:  1.65;
  --leading-loose: 1.78;

  /* The sign's tracking. The wordmark is the widest thing on the site.       */
  --track-sign:  0.3em;
  --track-label: 0.15em;
  --track-tight: -0.012em;

  /* ----------------------------------------------------------------- space */
  /* 4 pt scale, named so nobody has to remember that 6 means 1.5rem.         */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.25rem;
  --space-2xl: 3.5rem;
  --space-3xl: 5.5rem;
  --space-4xl: 8rem;

  /* Vertical rhythm between full sections — one value, used everywhere.      */
  --section-y:      clamp(3.25rem, 2rem + 5vw, 5.5rem);
  --section-y-tight: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);

  /* ------------------------------------------------------------ containers */
  /* The wordmark's cap height — the size of COFFEE on the sign. The mark    */
  /* above it and the line beneath are both calculated from this, so the     */
  /* three-line lockup scales as one object.                                 */
  --brand-cap:        2.2rem;

  /* The sticky header's height. Four things depend on it and must never    */
  /* disagree: the header itself, the mobile panel hanging under it, the    */
  /* offset an anchored section is scrolled to, and the line the section    */
  /* spy uses to decide where you are. It is measured from the header as    */
  /* built, not chosen — re-measure if --brand-cap or the masthead layout   */
  /* changes. This value is the one-row phone header: the sign, centred,    */
  /* with the toggle and the language chip either side of it.               */
  /* 4px + mark 52 + 2.2 + gaps 5.8 + COFFEE 35.2 + line 16.2 + 4px, which  */
  /* Chrome renders at 120 exactly.                                         */
  --header-h:         7.5rem;

  --container-wide:   1200px;
  --container:        1060px;
  --container-narrow: 720px;
  --measure:          64ch;   /* comfortable reading width for body copy      */
  --measure-tight:    52ch;   /* lede paragraphs, card copy                   */
  --gutter:           clamp(1.15rem, 4vw, 2.25rem);

  /* --------------------------------------------------------------- surface */
  --radius-box:  10px;  /* the printed menu's rounded add-ons box             */
  --radius-sm:   4px;
  --radius-pill: 999px;
  --rule-hair:   1px;

  /* Two shadows only, both barely there. Paper does not glow.                */
  --shadow-lift:  0 1px 2px oklch(22.5% 0.014 60 / 0.05),
                  0 6px 18px oklch(22.5% 0.014 60 / 0.06);
  --shadow-panel: 0 12px 40px oklch(22.5% 0.014 60 / 0.16);

  /* ---------------------------------------------------------------- motion */
  /* Personality: unhurried and settled. Things ease out and stop.            */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro:  120ms;
  --dur-short:  220ms;
  --dur-medium: 380ms;
  --dur-long:   620ms;

  /* ------------------------------------------------------------------- z   */
  --z-base:     1;
  --z-raised:   10;
  --z-actionbar: 150;
  --z-header:   200;
  --z-panel:    300;
  --z-skip:     500;
}

/* The wordmark steps up once there is room for it, and the header height
   steps with it. Discrete sizes rather than a fluid clamp: the header
   height has to be a number the panel and the anchor offsets can rely on,
   and a value that slides with the viewport is not one. */
@media (min-width: 50rem) {
  :root {
    --brand-cap: 2.54rem;
    --header-h:  8.5rem;      /* the same sum at this cap height: 136 */
  }
}

/* At 56rem the navigation leaves the panel and takes a second row under the
   sign, so the masthead grows by exactly that row: 4px + sign 128 + gap 8 +
   links 49 + 4px = 193. Measured in the browser
   like the two steps above it. The anchor offset allows 15px on top of the
   token, so a heading clears the header at every step. */
@media (min-width: 56rem) {
  :root {
    --header-h: 12.0625rem;
  }
}