/* Эйлира — beauty advisor design system */

:root {
  /* ──────────────────────────────────────────────────
     Warm nude palette — terracotta, rose, clay, bone
     All warm-leaning; chroma stays low except accents
     ────────────────────────────────────────────────── */

  /* Base / surface */
  --bone:        oklch(96.5% 0.012 60);    /* page bg */
  --paper:       oklch(98.2% 0.008 70);    /* card bg */
  --linen:       oklch(93.5% 0.020 55);    /* warm divider */
  --shell:       oklch(90.5% 0.028 50);    /* warm panel */

  /* Foreground */
  --ink:         oklch(22% 0.018 40);      /* primary text */
  --ink-soft:    oklch(38% 0.020 40);      /* secondary */
  --ink-mute:    oklch(55% 0.018 45);      /* tertiary */

  /* Accents — warm family */
  --terracotta:  oklch(58% 0.135 40);      /* hero accent */
  --terracotta-deep: oklch(46% 0.115 35);
  --rose:        oklch(72% 0.080 20);      /* dusty rose */
  --clay:        oklch(64% 0.090 50);      /* warm sand */
  --plum:        oklch(38% 0.060 10);      /* deep contrast */
  --gilt:        oklch(72% 0.075 75);      /* warm gold-ish */

  /* Confidence */
  --conf-high:   oklch(58% 0.085 145);     /* sage green */
  --conf-mid:    oklch(70% 0.085 75);      /* warm amber */
  --conf-low:    oklch(60% 0.090 25);      /* soft red-clay */

  /* Effects */
  --grain-opacity: 0.04;
  --shadow-card: 0 1px 2px rgba(60,30,15,0.04), 0 8px 24px rgba(60,30,15,0.06);
  --shadow-soft: 0 2px 14px rgba(80,40,20,0.05);

  /* Type scale */
  --font-display: "Fraunces", "Times New Roman", serif;
  --font-body:    "Geist", "Helvetica Neue", system-ui, sans-serif;
  --font-mono:    "Geist Mono", "SF Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 72px; /* compensate for sticky nav */
}

html, body {
  margin: 0; padding: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bone);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display type — Fraunces, optical-size + soft, slightly editorial */
.display {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 0;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.95;
}
.display-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 1;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Subtle warm grain — shared backdrop texture */
.grain {
  position: relative;
}
.grain::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.22  0 0 0 0 0.15  0 0 0 0.5 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  opacity: var(--grain-opacity);
  mix-blend-mode: multiply;
}

/* Generic placeholder for missing imagery */
.placeholder {
  background:
    repeating-linear-gradient(
      135deg,
      oklch(88% 0.025 45) 0 1px,
      transparent 1px 8px
    ),
    oklch(92% 0.020 50);
  border: 1px solid oklch(85% 0.025 45);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-align: center;
}

/* Confidence chip */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--paper);
  border: 1px solid currentColor;
}
.chip-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip-high { color: var(--conf-high); }
.chip-mid  { color: var(--conf-mid); }
.chip-low  { color: var(--conf-low); }

/* Reset Telegram chat scroll inside frame */
.tg-chat {
  background: oklch(96% 0.010 60);
  height: 100%;
  display: flex; flex-direction: column;
  font-family: "Roboto", system-ui, sans-serif;
}

/* ──────────────────────────────────────────────
   Mobile responsive overrides
   The prototype is desktop-first with inline styles;
   these rules override key inline declarations on small screens.
   Uses [style*="..."] attribute selectors + !important.
   ────────────────────────────────────────────── */

@media (max-width: 900px) {
  /* Prevent horizontal scroll on mobile */
  body { overflow-x: hidden; }

  /* Section padding — drop horizontal from 56px to 20px, soften vertical */
  section[style*="padding: 96px 56px"]      { padding: 56px 20px !important; }
  section[style*="padding: 88px 56px 64px"] { padding: 32px 20px 40px !important; }
  section[style*="padding: 128px 56px"]     { padding: 80px 20px !important; }
  footer[style*="padding: 48px 56px 32px"]  { padding: 40px 20px 24px !important; }
  nav[style*="padding: 14px 56px"]          { padding: 12px 16px !important; }

  /* Stack ALL multi-column grids to one column */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* Reduce gigantic gaps on stacked layouts */
  [style*="gap: 64px"],
  [style*="gap: 80px"],
  [style*="gap: 48px"]  { gap: 28px !important; }

  /* Hide nav menu links on mobile (logo + CTA remain) */
  nav[style*="position: sticky"] > div:last-child > a {
    display: none !important;
  }
  /* Tighten nav CTA on mobile */
  nav[style*="position: sticky"] > div:last-child {
    gap: 12px !important;
  }
  nav[style*="position: sticky"] button {
    padding: 8px 14px !important;
    font-size: 13px !important;
  }

  /* Scale down fixed-size H2s */
  h2[style*="font-size: 76px"] { font-size: 36px !important; line-height: 1.05 !important; }
  h2[style*="font-size: 64px"] { font-size: 32px !important; line-height: 1.05 !important; }
  h2[style*="font-size: 56px"] { font-size: 32px !important; line-height: 1.05 !important; }

  /* KillerFeature h2 / hero h1 fixed-96px → smaller */
  h1[style*="font-size: 96"],
  h2[style*="font-size: 96"] { font-size: 44px !important; line-height: 1.05 !important; }

  /* Manifesto giant quote mark: 240px → 120px */
  div[style*="font-size: 240"] { font-size: 120px !important; }

  /* Convert absolute-positioned overlay on hero images to relative flow.
     The pattern is: container <div style="position: relative; border-radius: 24"><img/><div style="position: absolute; inset: 0">overlay</div></div>
     On mobile, let overlay text flow below the image. */
  section [style*="position: absolute"][style*="inset: 0"][style*="display: grid"] {
    position: static !important;
    inset: auto !important;
    margin-top: 0 !important;
  }

  /* Capabilities & InStore overlay text containers had huge fixed pixel paddings —
     reset to compact mobile padding */
  div[style*="padding: \"160px 48px"],
  div[style*="padding: '160px 48px"],
  div[style*="padding:160px"],
  div[style*="padding: 160px 48px 0px 196px"] {
    padding: 24px 20px 32px !important;
  }

  /* Ensure full-width images stay inside viewport */
  img { max-width: 100%; height: auto; }

  /* Hero visual on mobile: keep visible (it's now an adaptive <img>),
     just tame the rotation so the corner doesn't clip and ensure it fits the column. */
  section#hero > div:first-child > div:nth-child(2) > div:nth-child(2) {
    transform: none !important;
  }
  section#hero img {
    max-width: min(100%, 360px) !important;
    margin-inline: auto;
  }

  /* KillerFeature beauty-card preview: kill rotation on mobile to prevent overflow */
  section#beauty-card-section [style*="rotate(-2deg)"] {
    transform: none !important;
  }
  /* Section overflow guard for big shadowed/rotated cards */
  section#beauty-card-section { overflow: hidden; }

  /* CardVariants and BotScenarios — children may have fixed widths/aspect ratios that need taming */
  section[id="cards"] img,
  section[id="scenarios"] img { max-width: 100% !important; height: auto !important; }

  /* Hide developer Tweaks panel on mobile — it overlaps content */
  .twk-panel { display: none !important; }
}

/* Tighter still on phones */
@media (max-width: 480px) {
  section[style*="padding: 96px 56px"]      { padding: 48px 16px !important; }
  section[style*="padding: 88px 56px 64px"] { padding: 24px 16px 32px !important; }
  section[style*="padding: 128px 56px"]     { padding: 64px 16px !important; }
  footer[style*="padding: 48px 56px 32px"]  { padding: 32px 16px 20px !important; }

  h2[style*="font-size: 64px"],
  h2[style*="font-size: 76px"],
  h2[style*="font-size: 56px"] { font-size: 28px !important; }

  h1[style*="font-size: 96"],
  h2[style*="font-size: 96"] { font-size: 36px !important; }

  div[style*="font-size: 240"] { font-size: 80px !important; }

  /* Hero CTA buttons stack-friendly */
  section[style*="padding: 88px 56px 64px"] button {
    width: 100%;
    justify-content: center;
  }
}