/* tideline — shared styling. Static, no external dependencies.
   Tokens mirror the app design system (Theme.swift) 1:1: sand / sea / sky,
   with a calm horizon-line motif. Dark mode is first-class. */

:root {
  /* Backgrounds & surfaces */
  --bg-base:        #F7F3EC;
  --bg-sunken:      #F1ECE2;
  --surface:        #FFFFFF;

  /* Text */
  --text-primary:   #14201F;
  --text-secondary: #51605F;
  --text-tertiary:  #7C8987;

  /* Accent (sea) */
  --accent:         #2E7D86;
  --accent-strong:  #1C4A52;
  --accent-soft:    #E7F1F2;
  --accent-on-soft: #1C4A52;
  --on-accent:      #FFFFFF;

  /* Lines — the "tide mark" */
  --line-hair:      rgba(28, 32, 31, 0.10);
  --line-soft:      #E9E2D5;
  --horizon:        #A5D0D4;

  /* Shadow (soft, sea-tinted, low) */
  --shadow-card:    0 1px 3px rgba(20, 54, 60, 0.06);

  /* Type */
  --font-serif: ui-serif, "New York", Georgia, "Times New Roman", serif;
  --font-sans:  -apple-system, system-ui, "SF Pro Text", "SF Pro",
                BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Layout */
  --maxw: 720px;

  /* Radii (soft squircle) */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-base:        #0E1718;
    --bg-sunken:      #0A1213;
    --surface:        #15211F;

    --text-primary:   #E9EEED;
    --text-secondary: #A4B2B0;
    --text-tertiary:  #76847F;

    --accent:         #6FB4BA;
    --accent-strong:  #A5D0D4;
    --accent-soft:    rgba(95, 179, 189, 0.12);
    --accent-on-soft: #A5D0D4;
    --on-accent:      #07100F;

    --line-hair:      rgba(233, 238, 237, 0.10);
    --line-soft:      rgba(233, 238, 237, 0.10);
    --horizon:        #1C4A52;

    --shadow-card:    0 1px 3px rgba(0, 0, 0, 0.35);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-primary);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 32px 20px 64px;
}

/* ---- Header + horizon-line motif ---- */

header.site {
  border-bottom: 1px solid var(--line-hair);
  background: var(--bg-base);
}

header.site .wrap {
  padding-top: 22px;
  padding-bottom: 22px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.brand {
  position: relative;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  color: var(--text-primary);
  text-decoration: none;
  letter-spacing: -0.01em;
  padding-bottom: 4px;
}

/* the tideline: a thin sea/horizon rule left under the wordmark */
.brand::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--horizon);
}

.brand .tag {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  color: var(--text-tertiary);
  margin-left: 8px;
  letter-spacing: 0;
}

/* ---- Long-form typography ---- */

h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
}

h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 40px 0 10px;
}

h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 18px;
  margin: 26px 0 6px;
}

p, ul, ol { margin: 0 0 15px; }

ul, ol { padding-left: 22px; }

li { margin-bottom: 7px; }

a {
  color: var(--accent);
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
  text-underline-offset: 2px;
}

a:hover { text-decoration-color: var(--accent); }

strong { font-weight: 650; }

.lede {
  font-size: 20px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-bottom: 26px;
}

.updated {
  color: var(--text-tertiary);
  font-size: 14px;
  margin-bottom: 30px;
}

/* ---- Home hero (calm placeholder) ---- */

.pill {
  display: inline-block;
  font-size: 13px;
  color: var(--accent-on-soft);
  background: var(--accent-soft);
  border: 1px solid var(--line-hair);
  border-radius: 999px;
  padding: 4px 13px;
  margin-bottom: 18px;
  letter-spacing: 0.01em;
}

/* ---- Cards & callouts ---- */

.card {
  background: var(--surface);
  border: 1px solid var(--line-hair);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin: 22px 0;
  box-shadow: var(--shadow-card);
}

.card > :last-child { margin-bottom: 0; }

/* ---- Buttons ---- */

.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: var(--shadow-card);
}

.btn:hover { filter: brightness(1.04); }

.btn.soft {
  background: var(--accent-soft);
  color: var(--accent-on-soft);
  border: 1px solid var(--line-hair);
  box-shadow: none;
}

/* ---- Tables (privacy data table) ---- */

table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 15px;
}

th, td {
  text-align: left;
  padding: 11px 12px;
  border-bottom: 1px solid var(--line-hair);
  vertical-align: top;
}

thead th {
  color: var(--text-secondary);
  font-weight: 600;
  border-bottom: 2px solid var(--horizon);
}

tbody tr:last-child td { border-bottom: none; }

code {
  font-family: var(--font-mono);
  background: var(--bg-sunken);
  border: 1px solid var(--line-hair);
  border-radius: 5px;
  padding: 1px 5px;
  font-size: 0.88em;
}

/* ---- Footer ---- */

footer.site {
  border-top: 1px solid var(--line-hair);
  color: var(--text-tertiary);
  font-size: 14px;
  background: var(--bg-sunken);
}

footer.site .wrap {
  padding-top: 24px;
  padding-bottom: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
}

footer.site a { color: var(--text-secondary); text-decoration: none; }
footer.site a:hover { color: var(--accent); text-decoration: underline; }
footer.site .sep { color: var(--line-soft); }
footer.site .copy {
  width: 100%;
  margin-top: 10px;
  color: var(--text-tertiary);
}

@media (max-width: 480px) {
  body { font-size: 16px; }
  h1 { font-size: 27px; }
  h2 { font-size: 20px; }
  .lede { font-size: 18px; }
}

/* ---- data-theme bridge ----
   The legal pages also load landing.css, which drives light/dark via a
   data-theme attribute (header toggle + localStorage) rather than the
   prefers-color-scheme media query used above. landing.css redefines most
   shared tokens under [data-theme], but a few names used only by this file
   (--surface, --on-accent, --shadow-card) are not covered there. Map them so
   they follow the toggle and stay legible when the chosen theme differs from
   the OS setting. landing.css is loaded after style.css, so its tokens win;
   these fall back to the same values when landing.css is absent. */
[data-theme="light"] {
  --surface: #FFFFFF;
  --on-accent: #FFFFFF;
  --shadow-card: 0 1px 3px rgba(20, 54, 60, 0.06);
}
[data-theme="dark"] {
  --surface: #15211F;
  --on-accent: #07100F;
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.35);
}