/* HomeCart AI — дизайн-система сайту.
   Дзеркалить застосунок: ios/HomeCartAI/DesignSystem/{Colors,Typography,Surfaces}.swift
   і docs/product/DESIGN_REFERENCE_2026-07.md.
   Мова: нейтральний «папір» + теплий колір ЛИШЕ там, де працює AI. */

@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/inter-latin-400.woff2) format('woff2'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/assets/inter-latin-500.woff2) format('woff2'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/assets/inter-latin-600.woff2) format('woff2'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/assets/inter-latin-700.woff2) format('woff2'); }

:root {
  color-scheme: light dark;
  --paper:      #eff0f2;   /* DSColor.background */
  --surface:    #ffffff;   /* DSColor.surface */
  --ink:        #0b0b0d;   /* DSColor.ink — текст і CTA */
  --ink-label:  #ffffff;   /* DSColor.ctaLabel */
  --muted:      #5e5960;   /* вторинний текст */
  --line:       #dcdde0;
  --ai-top:     #c4dcc9;   /* DSColor.aiTop — шавлія */
  --ai-bottom:  #ebe0c3;   /* DSColor.aiBottom — пісок */
  --ai-icon:    #4e7a5c;   /* DSColor.aiIcon — «трава» */
  --green-text: #2a6b3d;   /* ListStatusBadge.greenText */
  --green-bg:   rgba(52,199,89,.15);
  --amber-text: #8a5900;   /* ListStatusBadge.amberText */
  --amber-bg:   rgba(255,149,0,.15);
  --violet:     #7d6e92;   /* акцент голосу (DESIGN_REFERENCE §1.1) */
  --shadow:     0 4px 10px rgba(0,0,0,.06);   /* cardShadow() */
  --r-card:     18px;      /* DSRadius.card */
  --r-pill:     14px;      /* DSRadius.pill */
  --r-tile:     13px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #000000;
    --surface:    #1c1c1e;
    --ink:        #f5f5f7;
    --ink-label:  #0b0b0d;
    --muted:      #9a99a0;
    --line:       #2c2c2e;
    --ai-top:     #2e3d33;
    --ai-bottom:  #3b3529;
    --ai-icon:    #9cc5a6;
    --green-text: #8fd9a1;
    --amber-text: #ffc76b;
    --shadow:     0 4px 10px rgba(0,0,0,.35);
  }
}

:root[data-theme="dark"] {
  --paper:      #000000;
  --surface:    #1c1c1e;
  --ink:        #f5f5f7;
  --ink-label:  #0b0b0d;
  --muted:      #9a99a0;
  --line:       #2c2c2e;
  --ai-top:     #2e3d33;
  --ai-bottom:  #3b3529;
  --ai-icon:    #9cc5a6;
  --green-text: #8fd9a1;
  --amber-text: #ffc76b;
  --shadow:     0 4px 10px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.55 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 760px; margin: 0 auto; padding: 56px 20px 88px; }

h1 { font-size: clamp(30px, 6vw, 40px); font-weight: 700; letter-spacing: -.02em;
     line-height: 1.12; margin: 0 0 10px; text-wrap: balance; }
h2 { font-size: 20px; font-weight: 600; letter-spacing: -.01em; margin: 40px 0 12px; }
h3 { font-size: 17px; font-weight: 500; margin: 0 0 6px; }
p  { margin: 0 0 14px; }
.lede { color: var(--muted); font-size: 19px; line-height: 1.5; margin-bottom: 28px; }
.meta { color: var(--muted); font-size: 14px; margin: 0 0 28px; }
.muted { color: var(--muted); }
a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px;
    text-decoration-color: var(--ai-icon); text-decoration-thickness: 2px; }
a:hover { text-decoration-color: var(--ink); }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

/* Картка-поверхня (QuickActionCard / білі картки референсу) */
.card {
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: 20px;
}

/* AI-картка: градієнт «шавлія → пісок» + sparkle у білому кружечку (AIHintCard) */
.ai-card {
  background: linear-gradient(135deg, var(--ai-top), var(--ai-bottom));
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: 20px;
  margin: 28px 0;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.ai-card__spark {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.9);
  display: flex; align-items: center; justify-content: center;
  color: var(--ai-icon);
}
:root[data-theme="dark"] .ai-card__spark { background: rgba(28,28,30,.75); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ai-card__spark { background: rgba(28,28,30,.75); }
}
.ai-card p { margin: 0; color: var(--ink); }
:root[data-theme="dark"] .ai-card p,
:root[data-theme="dark"] .ai-card { color: #f0efe9; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ai-card,
  :root:not([data-theme="light"]) .ai-card p { color: #f0efe9; }
}

/* Сітка карток можливостей (QuickAction grid) */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
        gap: 14px; margin: 20px 0 8px; }
.grid .card p { margin: 0; color: var(--muted); font-size: 15px; }

/* Плитка-іконка з градієнтною підложкою (IconTile) */
.tile { width: 48px; height: 48px; border-radius: var(--r-tile);
        display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.tile svg { width: 24px; height: 24px; }
.tile--green  { background: linear-gradient(135deg, rgba(78,122,92,.24), rgba(78,122,92,.10)); color: var(--ai-icon); }
.tile--violet { background: linear-gradient(135deg, rgba(125,110,146,.24), rgba(125,110,146,.10)); color: var(--violet); }
.tile--ink    { background: linear-gradient(135deg, rgba(11,11,13,.16), rgba(11,11,13,.06)); color: var(--ink); }
.tile--amber  { background: linear-gradient(135deg, rgba(255,149,0,.24), rgba(255,149,0,.10)); color: var(--amber-text); }

/* Капсула-бейдж (ListStatusBadge) */
.badge { display: inline-block; font-size: 12px; font-weight: 500; padding: 5px 10px;
         border-radius: 999px; white-space: nowrap; }
.badge--green { background: var(--green-bg); color: var(--green-text); }
.badge--amber { background: var(--amber-bg); color: var(--amber-text); }

/* Темна pill-CTA (borderedProminent, tint = ink) */
.pill { display: inline-block; background: var(--ink); color: var(--ink-label);
        text-decoration: none; font-weight: 500; font-size: 16px;
        padding: 11px 20px; border-radius: var(--r-pill); min-height: 44px; }
.pill:hover { opacity: .9; text-decoration: none; }

/* Таблиця тарифів — рядки як поверхні, без «зебри» */
table { width: 100%; border-collapse: collapse; margin: 16px 0 8px; font-size: 15px; }
th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: 13px; letter-spacing: .02em;
     text-transform: uppercase; }
td:first-child { font-weight: 600; white-space: nowrap; }
.table-scroll { overflow-x: auto; }

/* Розділи політики: заголовок + текст, як секції в застосунку */
.section { border-bottom: 1px solid var(--line); padding: 18px 0; }
.section:last-child { border-bottom: none; }
.section h2 { margin: 0 0 6px; font-size: 17px; }
.section p { margin: 0; color: var(--muted); font-size: 16px; }

dl { margin: 8px 0 0; }
dt { font-weight: 600; margin-top: 22px; }
dd { margin: 6px 0 0; color: var(--muted); }

footer { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line);
         color: var(--muted); font-size: 14px; }
footer a { color: var(--muted); }

@media (max-width: 600px) {
  .wrap { padding: 40px 16px 72px; }
  .ai-card { flex-direction: column; gap: 12px; }
}