/* ============================================================
   Wigglitz — brand design tokens
   Palette sampled from wigglitz.com theme CSS. No rainbow gradients.
   ============================================================ */

@font-face { font-family: "Nunito"; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/nunito-400.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 600; font-display: swap;
  src: url("../assets/fonts/nunito-600.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 700; font-display: swap;
  src: url("../assets/fonts/nunito-700.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 800; font-display: swap;
  src: url("../assets/fonts/nunito-800.woff2") format("woff2"); }

:root {
  /* Brand teal family */
  --teal:      #4affd2;   /* primary brand teal (from spec) */
  --teal-500:  #14b8a6;   /* interactive / actions */
  --teal-600:  #0f9480;
  --teal-700:  #0f6e56;   /* deep teal, emphasis text */
  --teal-900:  #0a5f41;
  --teal-100:  #cfeae3;   /* light tint */
  --teal-050:  #eaf6f4;   /* near-white tint */

  /* Accents (sampled off site) */
  --salmon:    #ef6363;
  --yellow:    #f8ac51;

  /* Neutrals */
  --ink:       #131313;   /* primary text + dark surfaces */
  --ink-700:   #383838;
  --muted:     #616161;
  --line:      #e6ede9;   /* hairlines */
  --bg:        #ffffff;
  --bg-soft:   #f4f9f7;   /* app background, faint teal-tinted */
  --card:      #ffffff;

  /* Progress: fill vs track deliberately high-contrast */
  --track:     #dfeae5;
  --fill:      #0f9480;

  /* Shape + depth — pristine: hairlines + soft, tight shadows */
  --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px;
  --hairline: 1px solid rgba(15, 110, 86, 0.10);
  --shadow-1: 0 1px 3px rgba(19,19,19,0.05), 0 4px 14px rgba(19,19,19,0.05);
  --shadow-2: 0 4px 10px rgba(19,19,19,0.07), 0 12px 32px rgba(19,19,19,0.09);
  --shadow-teal: 0 4px 14px rgba(15,110,86,0.22);

  /* Layout */
  --tabbar-h: 68px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --maxw: 560px;

  --font: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: linear-gradient(180deg, #eefaf5 0%, #f7fafc 34%, #fbfcfd 100%);
  background-attachment: fixed;
  font-weight: 600;
  line-height: 1.35;
  overscroll-behavior: none;
  -webkit-user-select: none; user-select: none;
}

h1, h2, h3 { font-weight: 800; letter-spacing: -0.01em; }
button { font-family: inherit; cursor: pointer; color: inherit; }
img { -webkit-user-drag: none; user-drag: none; }