/* Design tokens (see docs/design.md). Defaults are the Ocean palette; src/theme/apply.js overrides them at runtime. */

:root {
  /* Neutrals: paper, surfaces, ink */
  --paper: #eef3f4;
  --surface: #fbfdfd;
  --surface-solid: #fbfdfd;
  --daily-tint: #fff3df;
  --ink: #0f2e3a;
  --ink-2: #33515c;
  --muted: #57707a;
  --line: rgba(15, 46, 58, 0.12);
  --line-strong: rgba(15, 46, 58, 0.24);
  --wash: rgba(15, 46, 58, 0.06);
  --scrim: rgba(15, 46, 58, 0.38);
  --daily-border: rgba(224, 154, 31, 0.35);
  --good-bg: rgba(63, 179, 127, 0.15);
  --danger-bg: rgba(255, 122, 92, 0.16);

  /* Semantic pastels: game objects and pictograms only */
  --blue: #bfe6ea;
  --blue-strong: #1a98a8;
  --coral: #ffc6b8;
  --coral-strong: #f2613f;
  --mint: #c3ead5;
  --mint-strong: #2fa36d;
  --yellow: #fbe0a8;
  --yellow-strong: #e09a1f;
  --lilac: #d3d2f6;
  --lilac-strong: #5b5bd6;
  --good: #3fb37f;
  --danger: #ff7a5c;
  /* Text versions of the semantic colors: same hue, dark enough for WCAG AA (4.5:1). */
  --good-text: #1f6e4b;
  --danger-text: #a33b24;
  --lilac-text: #4b48b8;
  --blue-text: #136f7d;

  /* Type */
  --font: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --text-display: 48px;
  --text-h1: 28px;
  --text-h2: 22px;
  --text-title: 18px;
  --text-body: 16px;
  --text-small: 14px;
  --text-caption: 13px;

  /* Space and shape */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 16px;

  /* Only floating elements (sheets, toasts) cast a shadow. */
  --shadow-float: 0 12px 40px rgba(35, 50, 74, 0.14);
  --shadow-small: 0 1px 3px rgba(35, 50, 74, 0.16);
  --shadow-soft: none;
  --shadow-card: none;

  --gutter: 20px;
  --safe-top: max(12px, env(safe-area-inset-top));
  --safe-bottom: max(16px, env(safe-area-inset-bottom));
}