/* Layrova — shared styles for product UI (Telegram mini-app + web + native mockups) */
/* Inherits Telegram theme vars when present, falls back to Layrova palette */

:root {
  /* Telegram theme vars (injected by tg.WebApp) with fallbacks */
  --tg-bg: var(--tg-theme-bg-color, #0f1216);
  --tg-text: var(--tg-theme-text-color, #e8eaed);
  --tg-hint: var(--tg-theme-hint-color, #7a808a);
  --tg-link: var(--tg-theme-link-color, #7fb0e5);
  --tg-button: var(--tg-theme-button-color, #3f6fa6);
  --tg-button-text: var(--tg-theme-button-text-color, #ffffff);
  --tg-secondary-bg: var(--tg-theme-secondary-bg-color, #171a1f);
  --tg-section-bg: var(--tg-theme-section-bg-color, #13171c);
  --tg-section-header: var(--tg-theme-section-header-text-color, #7fb0e5);
  --tg-header-bg: var(--tg-theme-header-bg-color, #0f1216);
  --tg-accent-text: var(--tg-theme-accent-text-color, #7fb0e5);
  --tg-subtitle-text: var(--tg-theme-subtitle-text-color, #8a8f99);
  --tg-destructive: var(--tg-theme-destructive-text-color, #e2a078);

  /* Layrova palette (semantic) */
  --lr-cool: #7fb0e5;              /* weather */
  --lr-cool-soft: rgba(127,176,229,0.14);
  --lr-cool-strong: rgba(127,176,229,0.42);
  --lr-warm: #e2a078;               /* gaps / wardrobe action */
  --lr-warm-soft: rgba(226,160,120,0.14);
  --lr-warm-strong: rgba(226,160,120,0.45);

  /* Neutrals */
  --ink: var(--tg-text);
  --ink-2: color-mix(in srgb, var(--tg-text) 80%, transparent);
  --muted: var(--tg-hint);
  --bg: var(--tg-bg);
  --panel: var(--tg-section-bg);
  --panel-2: var(--tg-secondary-bg);
  --well: rgba(255,255,255,0.025);
  --hair: rgba(255,255,255,0.08);
  --hair-strong: rgba(255,255,255,0.18);

  /* Light theme override (Telegram light users) */
  --sans: ui-sans-serif, system-ui, -apple-system, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Inter, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;
}

/* Heuristic light mode when Telegram injects a light bg */
@media (prefers-color-scheme: light) {
  :root {
    --well: rgba(0,0,0,0.028);
    --hair: rgba(0,0,0,0.09);
    --hair-strong: rgba(0,0,0,0.2);
    --lr-cool: #3f6fa6;
    --lr-cool-soft: rgba(63,111,166,0.1);
    --lr-cool-strong: rgba(63,111,166,0.32);
    --lr-warm: #b8673a;
    --lr-warm-soft: rgba(184,103,58,0.1);
    --lr-warm-strong: rgba(184,103,58,0.4);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.45;
  font-feature-settings: "tnum", "ss01";
}

/* ---------- shared primitives ---------- */
.eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.panel {
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 14px;
}
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--hair-strong);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
}
.pill.warm { color: var(--lr-warm); border-color: var(--lr-warm-strong); background: var(--lr-warm-soft); border-style: dashed;}
.pill.cool { color: var(--lr-cool); border-color: var(--lr-cool-strong); background: var(--lr-cool-soft);}

/* ---------- garment icon styling (monoline, currentColor) ---------- */
.g-icon {
  display: inline-block;
  width: 44px;
  height: 44px;
  color: var(--ink-2);
}
.g-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}