/*
 * Design tokens for the Toranj landing page.
 *
 * The color values below are copied verbatim from `AppTone.earth` (light
 * mode) in apps/mobile/lib/core/theme/app_palette.dart — that Dart file is
 * the single source of truth for the app's palette. If the palette changes
 * there, re-copy the values here; do not hand-tune them independently.
 *
 * A few extra variables (marked below) are NOT part of the app palette --
 * they are one-off dark-section shades lifted directly from the original
 * `.dc.html` design source (hover states for dark pill buttons, the lighter
 * icon tint used on dark backgrounds, etc.). They only apply to this
 * marketing page and have no equivalent token in the Flutter app.
 */

:root {
  /* --- from apps/mobile/lib/core/theme/app_palette.dart (AppTone.earth) --- */
  --color-page: #e9e6e0;
  --color-surface: #f7f5f1;
  --color-panel: #f1efea;
  --color-tone: #e5e1da;
  --color-line: #e3dfd8;
  --color-ink: #171512;
  --color-paper: #ffffff;
  --color-muted: #8a847c;
  --color-muted2: #b6afa6;
  --color-accent: #0f9b93;
  --color-accent2: #4fd3c9;
  --color-accent-soft: #eef7f6;
  --color-accent-ink: #0b7a74;
  --color-gold: #e2b84f;

  /* accentTone prop default from the design source ("compare" hero ships) */
  --accent: var(--color-accent-ink);

  /* --- design-source-only shades, dark sections of THIS page only --- */
  --color-dark-2: #26231f; /* pill/card fill on dark sections */
  --color-dark-3: #332f2a; /* hover state for --color-dark-2 */
  --color-dark-muted: #a49d94; /* body text on dark sections */
  --color-dark-icon: #8fd6cf; /* icon tint on dark sections */

  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-xl: 36px;

  --container-max: 1240px;
  --container-pad: clamp(18px, 5vw, 64px);

  --shadow-card: 0 40px 80px -34px rgba(30, 25, 18, 0.5);
  --shadow-dark-card: 0 50px 90px -40px rgba(0, 0, 0, 0.7);

  color-scheme: light;
}