/* Studio 22 Café — design tokens
 * Derived from: the original logo artwork (core colours, exact) and
 * Instagram photography (environment/product colours, sampled — see COLOUR.md).
 * Compiled 30 July 2026.
 */

:root {
  /* ---- Core: exact, from the logo file ---------------------------------- */
  --s22-ink:              #0B0B0B;
  --s22-cream:            #F4EBD4;

  /* Cream ramp, for body copy and muted text on dark grounds */
  --s22-cream-100:        #FDF7E3;  /* brightest observed highlight */
  --s22-cream-200:        #F4EBD4;  /* = --s22-cream, the ink value  */
  --s22-cream-300:        #E4D9BE;
  --s22-cream-400:        #C4B99F;
  --s22-cream-500:        #9A9080;

  /* Ink ramp, for elevated surfaces on dark grounds */
  --s22-ink-900:          #000000;
  --s22-ink-800:          #0B0B0B;  /* = --s22-ink */
  --s22-ink-700:          #171514;
  --s22-ink-600:          #23201E;
  --s22-ink-500:          #332E2B;

  /* ---- Environment: sampled from the fit-out and building --------------- */
  --s22-bordeaux:         #5B1A1C;  /* interior walls + curved ceiling */
  --s22-espresso:         #2C1213;  /* the same red in deep shade */
  --s22-terracotta:       #B54333;  /* the wall under direct light */
  --s22-crimson:          #8E1B32;  /* entry door frame */
  --s22-brass:            #C6B27C;  /* illuminated channel letters */
  --s22-brick:            #8C7355;  /* the curved drum's brickwork */
  --s22-canopy:           #A0A29F;  /* fluted stainless awning, counters */
  --s22-neon:             #E81E8C;  /* magenta LED — treat as light, not fill */

  /* ---- Product accents -------------------------------------------------- */
  --s22-matcha:           #5A6B2A;
  --s22-strawberry:       #B83758;
  --s22-golden:           #A9611F;
  --s22-sage:             #8E9375;

  /* ---- Semantic --------------------------------------------------------- */
  --s22-bg:               var(--s22-ink);
  --s22-bg-elevated:      var(--s22-ink-700);
  --s22-bg-feature:       var(--s22-bordeaux);
  --s22-fg:               var(--s22-cream);
  --s22-fg-muted:         var(--s22-cream-400);
  --s22-rule:             color-mix(in srgb, var(--s22-cream) 22%, transparent);
  --s22-accent:           var(--s22-terracotta);
  --s22-accent-glow:      var(--s22-neon);

  /* ---- Type ------------------------------------------------------------- */
  --s22-font-display:     "Jost", "Futura PT", "Futura", "Century Gothic",
                          "Questrial", system-ui, -apple-system, sans-serif;
  --s22-font-body:        var(--s22-font-display);
  --s22-font-script:      "Sacramento", "Grand Hotel", "Brush Script MT", cursive;
  --s22-font-menu:        "Oswald", "Archivo Narrow", "Barlow Condensed",
                          var(--s22-font-display);

  /* Tracking — the signature of this identity. Never set display type tight. */
  --s22-track-display:    0.14em;
  --s22-track-label:      0.36em;   /* the "CAFE" treatment */
  --s22-track-heading:    0.10em;
  --s22-track-body:       0.01em;

  --s22-weight-display:   500;
  --s22-weight-heading:   600;
  --s22-weight-body:      400;

  /* ---- Logo geometry (ratios against the STUDIO 22 cap height) ---------- */
  --s22-logo-aspect:      6.753;    /* wordmark width ÷ cap height  */
  --s22-logo-height:      1.629;    /* full lockup height ÷ cap height */
  --s22-logo-clearspace:  0.5;      /* × cap height, minimum, all sides */
  --s22-logo-inline:      0.045em;  /* hollow contour stroke weight */
  --s22-cafe-ratio:       0.348;    /* CAFE cap height ÷ STUDIO cap height */

  /* ---- Radii & motion --------------------------------------------------- */
  --s22-radius-sm:        2px;      /* the identity is geometric and hard-edged */
  --s22-radius-md:        4px;
  --s22-radius-pill:      999px;    /* only for the circular badge and chips */
  --s22-ease:             cubic-bezier(0.2, 0, 0.2, 1);
  --s22-dur:              200ms;
}

/* The inline/hollow wordmark effect: a stroked, unfilled glyph.
   Works on SVG <text>; for HTML use the SVG asset instead. */
.s22-inline {
  font-family: var(--s22-font-display);
  font-weight: var(--s22-weight-display);
  text-transform: uppercase;
  letter-spacing: var(--s22-track-display);
  fill: none;
  stroke: var(--s22-cream);
  stroke-width: var(--s22-logo-inline);
  paint-order: stroke;
}

/* The "CAFE" label treatment: wide caps between two hairline rules. */
.s22-label {
  font-family: var(--s22-font-display);
  font-weight: var(--s22-weight-display);
  text-transform: uppercase;
  letter-spacing: var(--s22-track-label);
  color: var(--s22-cream);
  display: flex;
  align-items: center;
  gap: 0.9em;
}
.s22-label::before,
.s22-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
}

.s22-tagline {
  font-family: var(--s22-font-script);
  color: var(--s22-terracotta);
  letter-spacing: 0;
}