/* Cocktail AI - site styles. Palette and type mirror the app (constants/theme.ts).
   Fonts are self-hosted rather than pulled from Google. A page whose subject is
   what we do with your data should not hand your IP address to a third party in
   order to render itself. */
@font-face{font-family:'Poppins';src:url('/fonts/Poppins_600SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Poppins';src:url('/fonts/Poppins_700Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'DM Sans';src:url('/fonts/DMSans_400Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'DM Sans';src:url('/fonts/DMSans_500Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'DM Sans';src:url('/fonts/DMSans_700Bold.woff2') format('woff2');font-weight:700;font-display:swap}

:root {
  --coral: #FF6B6B;
  --teal: #4ECDC4;
  --mint: #A8E6CF;
  --ink: #2D3436;
  --muted: rgba(45, 52, 54, .70);
  --faint: rgba(45, 52, 54, .50);
  --rule: rgba(45, 52, 54, .12);
  --bg: #FFFFFF;
  --bg-soft: #F8F9FA;
  --measure: 45rem;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.7 'DM Sans', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 1.5rem; }

/* header */
header { border-bottom: 1px solid var(--rule); }
header .wrap { display: flex; align-items: center; gap: 1.75rem; padding-block: 1.25rem; flex-wrap: wrap; }
.brand {
  font: 700 1.125rem/1 'Poppins', sans-serif;
  letter-spacing: -.01em; color: var(--ink); text-decoration: none;
  display: flex; align-items: center; gap: .6rem;
}
.brand .dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--coral); }
nav { margin-left: auto; display: flex; gap: 1.5rem; flex-wrap: wrap; }
nav a { color: var(--muted); text-decoration: none; font-size: .9375rem; font-weight: 500; }
nav a:hover, nav a[aria-current="page"] { color: var(--ink); }

/* hero */
.hero { padding: 5rem 0 4rem; border-bottom: 1px solid var(--rule); }
.hero h1 {
  font: 700 clamp(2.25rem, 6vw, 3.5rem)/1.1 'Poppins', sans-serif;
  letter-spacing: -.025em; margin: 0 0 1.25rem;
}
.hero p { font-size: 1.1875rem; color: var(--muted); margin: 0; max-width: 34rem; }
.hero em { font-style: normal; color: var(--coral); }

/* page body */
main { padding: 3.5rem 0 5rem; }
h1.page {
  font: 700 clamp(1.875rem, 4.5vw, 2.5rem)/1.15 'Poppins', sans-serif;
  letter-spacing: -.02em; margin: 0 0 .5rem;
}
.updated { color: var(--faint); font-size: .9375rem; margin: 0 0 3rem; }
h2 {
  font: 600 1.3125rem/1.3 'Poppins', sans-serif;
  letter-spacing: -.01em; margin: 3rem 0 .875rem; padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
}
h2:first-of-type { border-top: 0; padding-top: 0; }
h3 { font: 600 1.0625rem/1.4 'Poppins', sans-serif; margin: 1.75rem 0 .5rem; }
p, li { color: var(--muted); }
p { margin: 0 0 1.125rem; }
ul { padding-left: 1.25rem; margin: 0 0 1.125rem; }
li { margin-bottom: .625rem; }
li::marker { color: var(--teal); }
strong { color: var(--ink); font-weight: 700; }
a { color: var(--ink); text-decoration-color: var(--teal); text-underline-offset: .2em; }

/* callout */
.note {
  border-left: 3px solid var(--teal); background: var(--bg-soft);
  padding: 1.125rem 1.25rem; margin: 0 0 1.5rem; border-radius: 0 8px 8px 0;
}
.note p:last-child { margin-bottom: 0; }

/* data table */
.table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; font-size: .9375rem; }
.table th, .table td { text-align: left; padding: .75rem .5rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.table th { font: 500 .8125rem/1.3 'DM Sans', sans-serif; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.table td { color: var(--muted); }
.table td:first-child { color: var(--ink); font-weight: 500; white-space: nowrap; }
.scroll { overflow-x: auto; }

/* cards on the landing page */
.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); margin: 2.5rem 0 0; }
.card {
  border: 1px solid var(--rule); border-radius: 14px; padding: 1.5rem;
  text-decoration: none; display: block; transition: border-color .15s, transform .15s;
}
.card:hover { border-color: var(--teal); transform: translateY(-2px); }
.card h3 { margin: 0 0 .375rem; color: var(--ink); }
.card p { margin: 0; font-size: .9375rem; }

footer { border-top: 1px solid var(--rule); padding: 2.5rem 0; }
footer .wrap { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center; }
footer p { margin: 0; font-size: .875rem; color: var(--faint); }
footer nav { margin-left: auto; }

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #F5F6F7; --muted: rgba(245,246,247,.72); --faint: rgba(245,246,247,.50);
    --rule: rgba(245,246,247,.14); --bg: #16181A; --bg-soft: #1E2123;
  }
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .875em; background: var(--bg-soft); padding: .1em .35em;
  border-radius: 4px; color: var(--ink);
}