/*
 * The Fern Basket — the text pages (privacy policy, delete account).
 *
 * Everything shared with the homepage (tokens, fonts, top bar, logo mark,
 * watermarks, footer, headings) is in /chrome.css, linked before this file.
 * This file holds only what long-form text needs.
 *
 * Every colour below is copied verbatim from the app's single source of
 * truth: src/theme/tokens.ts in ecocraftnz/basket-trans-tasman (which is
 * itself generated from design_handoff_basket_app/design-tokens.json).
 * Never invent a hex value here — if a colour is needed that the app does
 * not define, add it to the app's tokens first.
 *
 * Spacing follows the same 8pt grid the app uses (4 and 12 allowed as
 * micro-steps), and the type scale mirrors src/theme/tokens.ts `type`.
 */

/* ---- Tokens: light (tokens.ts → color.light) ---------------------------- */
:root {
  --primary: #17513B;
  --primary-pressed: #123F2E;
  --on-primary: #F3F8F2;
  --ocean: #2C6E8F;
  --accent: #17513B;
  --bg: #F6F1E8;
  --surface: #FFFDF9;
  --surface-border: #EAE1CF;
  --surface-nav: #FFFDF9;
  --text: #17251E;
  --text-muted: #5C6B62;
  --text-faint: #647268;
  --success-bg: #E6F0E6;
  --success-border: #CFE3CF;
  --success-text: #2E6B4C;
  --warn: #8F5E10;
  --warn-bg: #FBF4E4;
  --warn-border: #F0E4C6;
  --premium-gold: #F3D98A;

  /* 8pt grid (tokens.ts `spacing`) */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 12px;
  --sp-lg: 16px;
  --sp-xl: 24px;
  --sp-xxl: 32px;
  --gutter: 24px;
  --section-gap: 32px;

  /* tokens.ts `radius` and `size` */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --button-height: 56px;
  --min-touch: 44px;

  --maxw: 1080px;
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, Helvetica, Arial, sans-serif;
}

/* ---- Tokens: dark (tokens.ts → color.dark) ------------------------------
   Follows the theme toggle first and the OS second, exactly as chrome.css
   does for the shared tokens. Only the values that differ are restated.   */
html[data-theme="dark"] {
    --primary: #2E7D5B;
    --primary-pressed: #256A4C;
    --on-primary: #F3F8F2;
    --ocean: #6FC79B;
    --accent: #6FC79B;
    --bg: #0E1713;
    --surface: #17211C;
    --surface-border: #26332B;
    --surface-nav: #12201A;
    --text: #EAF0EC;
    --text-muted: #8A968F;
    --text-faint: #828E86;
    --success-bg: #152A20;
    --success-border: #1F3A2C;
    --success-text: #8FB49F;
    --warn: #E9C572;
    --warn-bg: #241E12;
    --warn-border: #40361E;
    --premium-gold: #F3D98A;
  }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
      --primary: #2E7D5B;
      --primary-pressed: #256A4C;
      --on-primary: #F3F8F2;
      --ocean: #6FC79B;
      --accent: #6FC79B;
      --bg: #0E1713;
      --surface: #17211C;
      --surface-border: #26332B;
      --surface-nav: #12201A;
      --text: #EAF0EC;
      --text-muted: #8A968F;
      --text-faint: #828E86;
      --success-bg: #152A20;
      --success-border: #1F3A2C;
      --success-text: #8FB49F;
      --warn: #E9C572;
      --warn-bg: #241E12;
      --warn-border: #40361E;
      --premium-gold: #F3D98A;
    }
}

/* ---- Base --------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

body {
  /* tokens.ts type.body — 15/24 */
  font-size: 15px;
  line-height: 24px;
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---- Type scale (tokens.ts `type`) -------------------------------------- */
p {
  margin: 0;
}

.muted {
  color: var(--text-muted);
  font-weight: 500;
}

.overline {
  /* tokens.ts type.overline */
  font-size: 12px;
  line-height: 16px;
  font-weight: 800;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  color: var(--success-text);
}

.caption {
  font-size: 12px;
  line-height: 16px;
  color: var(--text-faint);
}

/* ---- Policy page (long-form legal text, e.g. Privacy Policy) ------------ */
.policy {
  padding: var(--sp-xxl) 0 calc(var(--sp-xxl) * 2);
}

.policy .wrap {
  max-width: 760px;
  padding: 0;
}

/* Body text at the homepage's size, in the full text colour: this is legal
   text people have to be able to read. */
.policy p,
.policy li {
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.6;
}

.policy a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.policy h2 {
  margin-top: var(--sp-xxl);
  margin-bottom: var(--sp-md);
}

.policy h3 {
  margin-top: var(--sp-xl);
  margin-bottom: var(--sp-sm);
}

.policy p,
.policy ul,
.policy ol {
  margin: var(--sp-md) 0 0;
}

.policy ul,
.policy ol {
  padding-left: var(--sp-xl);
}

.policy li + li {
  margin-top: var(--sp-xs);
}

/* Wide tables scroll inside their own box. Without this the whole page
   scrolls sideways on a phone, which is never acceptable. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--sp-lg) 0 0;
}

.policy table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  margin: 0;
  font-size: 13px;
  line-height: 18px;
}

.policy th,
.policy td {
  border: 1px solid var(--surface-border);
  padding: var(--sp-sm) var(--sp-md);
  text-align: left;
  vertical-align: top;
}

.policy th {
  background: var(--surface);
  font-weight: 700;
}

.policy-meta {
  margin-top: var(--sp-sm) !important;
}

/* A phone screenshot beside a step (the delete-account page). Never wider
   than 320px; the border and radius match the homepage's screenshot frames. */
.policy .step-shot {
  margin: var(--sp-md) 0 var(--sp-sm);
  max-width: 320px;
}

.policy .step-shot img {
  width: 100%;
  height: auto;
  border: 1px solid var(--surface-border);
  border-radius: var(--r-lg);
}

.policy .step-shot figcaption {
  margin-top: var(--sp-sm);
  font-size: 13px;
  line-height: 18px;
  color: var(--text-muted);
}

.policy li > p {
  margin-top: var(--sp-sm);
}