/* ─────────────────────────────────────────────────────────────────────────
 * design-systems/goodreads-ios/tokens.css
 * Reviewed against the source DESIGN.md on 2026-10-13.
 *
 * Books, reviews & reading tracking. Warm tan paper canvas (#F4F1EA light, ink-brown #161310 dark) with literary brown #382110 chrome, full-color cover grids, the load-bearing amber five-star rating #E9A100, a green Want-to-Read CTA #409D69, teal links #00635D, and a serif 1.6 reading rhythm.
 *
 * Extracted from awesome-ios-design-md (MIT, Copyright (c) 2026 Muhammed Eliwat).
 * Primary mode: light. Sizes are iOS points mapped 1:1 to CSS px.
 * ─────────────────────────────────────────────────────────────────── */

:root {
  /* Surface */
  --bg: #F4F1EA;
  --surface: #FFFFFF;
  --surface-warm: color-mix(in oklab, var(--surface), var(--fg) 6%);

  /* Foreground */
  --fg: #382110;
  --fg-2: color-mix(in oklab, var(--fg), var(--bg) 15%);
  --muted: #6B5E47;
  --meta: color-mix(in oklab, var(--muted), var(--bg) 25%);

  /* Border */
  --border: #DDD6C7;
  --border-soft: color-mix(in oklab, var(--border), var(--bg) 50%);

  /* Accent */
  --accent: #409D69;
  --accent-on: #FFFFFF;
  --accent-hover: color-mix(in oklab, var(--accent), black 8%);
  --accent-active: color-mix(in oklab, var(--accent), black 14%);

  /* Semantic */
  --success: #409D69;
  --warn: #E9A100;
  --danger: #D9534F;

  /* Typography — fonts */
  --font-display: "Merriweather", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --font-body: "Merriweather", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* Typography — type scale (from §3's hierarchy table) */
  --text-xs: 10px;
  --text-sm: 14px;
  --text-base: 15px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 19px;
  --text-2xl: 23px;
  --text-3xl: 30px;
  --text-4xl: 39px;

  /* Typography — leading & tracking */
  --leading-body: 1.6;
  --leading-tight: 1.15;
  --tracking-display: -0.01em;

  /* Radius (from §4's corner radii) */
  --radius-sm: 4px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 9999px;

  /* Layout — a phone screen; desktop/tablet values only matter if a page is
   * stretched beyond one. */
  --section-y-desktop: 64px;
  --section-y-tablet: 40px;
  --section-y-phone: 24px;
  --container-max: 430px;
  --container-gutter-desktop: 16px;
  --container-gutter-tablet: 16px;
  --container-gutter-phone: 16px;
}