/* ==========================================================
   HAPPY SUN — brand kit
   Source of truth for every Happy Sun asset.
   build.sh copies it into Website/assets.
   Fonts (Google): Fraunces, Caveat, Familjen Grotesk, Inter
   ========================================================== */

:root {
  --navy:   #062341;
  --blue:   #7EB4E2;
  --yellow: #FFBB4E;
  --cream:  #FBF5EA;
  --paper-shadow: 0 6px 18px rgba(51, 38, 26, .18);

  --f-display: 'Fraunces', Georgia, serif;
  --f-hand:    'Caveat', 'Comic Sans MS', cursive;
  --f-body:    'Familjen Grotesk', system-ui, sans-serif;
  --f-mark:    'Inter', system-ui, sans-serif;
}

/* Bottle-label stripes: navy / blue / yellow with cream gaps */
.hs-stripes {
  height: 29px;
  background: linear-gradient(to bottom,
    var(--navy) 0 9px, var(--cream) 9px 13px, var(--blue) 13px 19px,
    var(--cream) 19px 23px, var(--yellow) 23px 29px);
}
.hs-stripes.flip { transform: scaleY(-1); }

/* Wordmark, as printed on the bottle */
.hs-wordmark { font: 700 20px/1 var(--f-mark); letter-spacing: .04em; color: var(--navy); }
.hs-tagline  { font: 600 8px/1 var(--f-body); letter-spacing: .22em; text-transform: uppercase; }

/* Type */
.hs-display { font-family: var(--f-display); font-weight: 900; letter-spacing: -.02em; line-height: 1;
              font-variation-settings: "SOFT" 100, "WONK" 1; }
.hs-display i, .hs-display em { font-style: italic; }
.hs-hand    { font-family: var(--f-hand); font-weight: 700; }
.hs-label   { font: 600 .72rem/1.2 var(--f-body); letter-spacing: .22em; text-transform: uppercase; }

/* Polaroid + tape */
.hs-polaroid { background: #fff; padding: 12px 12px 14px; box-shadow: var(--paper-shadow); }
.hs-polaroid img { display: block; width: 100%; height: auto; }
.hs-polaroid figcaption { font: 400 1.25em/1 var(--f-hand); margin-top: 10px; color: var(--navy); }
.hs-tape { position: absolute; width: 86px; height: 24px; background: rgba(255, 187, 78, .75); }

/* Dotted-leader menu rows */
.hs-menu-row { display: flex; align-items: baseline; gap: 10px; }
.hs-menu-row .lead { flex: 1; height: 4px; align-self: flex-end; margin-bottom: .45em;
  background: radial-gradient(circle, var(--navy) 1px, transparent 1.4px) left center / 6px 4px repeat-x; }

/* Hand-drawn SVG snippets (paste inline):
   underline: <svg viewBox="0 0 170 16" fill="none"><path d="M3 11 C 40 4, 90 3, 128 7 S 160 12, 167 6" stroke="#FFBB4E" stroke-width="5" stroke-linecap="round"/></svg>
   arrow:     <svg viewBox="0 0 70 60" fill="none"><path d="M60 4 C 52 26, 34 42, 8 50" stroke="#062341" stroke-width="2.5" stroke-linecap="round"/><path d="M20 40 L 7 50 L 22 55" stroke="#062341" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
   circle:    <svg viewBox="0 0 170 56" fill="none"><path d="M150 10 C 120 1, 40 0, 14 12 C -4 22, 8 46, 60 51 C 110 56, 166 46, 164 26 C 162 14, 140 8, 118 7" stroke="#FFBB4E" stroke-width="3" stroke-linecap="round"/></svg>
   rule:      <svg viewBox="0 0 515 8" fill="none" preserveAspectRatio="none"><path d="M2 5 C 120 2, 260 6, 380 3 S 500 5, 513 4" stroke="#062341" stroke-width="1.5" stroke-linecap="round"/></svg>
*/

/* ---- Talavera tile (CDMX × California colonial) ----
   Cobalt + cream zigzag, two cobalt shades for a hand-glazed feel.
   Use as a texture/background only. Never for type or logo. */
:root { --cobalt: #3B5BC2; }
.hs-tile {
  background-color: var(--cream);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='60' viewBox='0 0 240 60'%3E%3Cpath d='M0 60L60 0V60Z' fill='%233B5BC2'/%3E%3Cpath d='M60 0L120 60H60Z' fill='%233554B8'/%3E%3Cpath d='M120 60L180 0V60Z' fill='%234464CB'/%3E%3Cpath d='M180 0L240 60H180Z' fill='%233B5BC2'/%3E%3Cpath d='M0 0H240M0 60H240M60 0V60M120 0V60M180 0V60M0 0V60M240 0V60' stroke='%23F4EEE2' stroke-width='3'/%3E%3C/svg%3E");
  background-size: 160px 40px;
}