/* ─────────────────────────────────────────────────────────────────────────────
   Design tokens — the single source of truth for the native shell's look.
   Change the brand HERE and every screen updates; components never hard-code a
   raw color, radius, or spacing value. Two tiers:
     1. primitives — the raw brand ramp (from the web app's mark.svg) + neutrals
     2. semantic   — the roles components actually reference (--color-*, --radius-*, --space-*)
   The "Seamless" direction: the web app's dark ink ground + spring-green accent,
   so the native shell and the app it opens read as one product.
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  /* ── 1. Primitives ───────────────────────────────────────────────────────── */
  /* Brand ramp — the greens straight out of client/public/brand/mark.svg */
  --bt-green-300: #96e6a1; /* mint highlight   */
  --bt-green-400: #57e08e;
  --bt-green-500: #40c878; /* spring — primary */
  --bt-green-600: #2fae67;
  --bt-green-700: #1e9f93; /* teal depth       */

  /* Green-tinted neutrals (chosen, not a default grey — biased toward the ink in mark.svg) */
  --bt-ink-900: #0e1315; /* app background   */
  --bt-ink-850: #111917; /* raised surface   */
  --bt-ink-800: #141b1e;
  --bt-ink-750: #182024; /* input field      */
  --bt-line-800: #1e2925;
  --bt-line-700: #25322e; /* hairline border  */
  --bt-line-600: #2b3934; /* stronger border  */
  --bt-fg:      #eef3f0;
  --bt-fg-dim:  #b6c7be;
  --bt-fg-muted:#8ea69c;
  --bt-fg-faint:#5c6d66;

  --bt-red-400:   #f2777a; /* danger  */
  --bt-amber-400: #e0b64b; /* warning */

  /* ── 2. Semantic roles (what components use) ─────────────────────────────── */
  --color-bg:            var(--bt-ink-900);
  --color-surface:       var(--bt-ink-850);
  --color-surface-2:     var(--bt-ink-750);
  --color-border:        var(--bt-line-700);
  --color-border-strong: var(--bt-line-600);

  --color-text:        var(--bt-fg);
  --color-text-dim:    var(--bt-fg-dim);
  --color-text-muted:  var(--bt-fg-muted);
  --color-text-faint:  var(--bt-fg-faint);

  --color-primary:       var(--bt-green-500);
  --color-primary-hover: var(--bt-green-600);
  --color-primary-active: var(--bt-green-700);
  --color-on-primary:    #052012;
  --color-primary-tint:  color-mix(in srgb, var(--bt-green-500) 14%, transparent);
  --color-ring:          color-mix(in srgb, var(--bt-green-500) 32%, transparent);

  --color-danger: var(--bt-red-400);
  --color-warn:   var(--bt-amber-400);

  /* ── Shape & rhythm ──────────────────────────────────────────────────────── */
  --radius-sm:   0.5rem;
  --radius-md:   0.75rem;
  --radius-lg:   1rem;
  --radius-pill: 999px;

  --space-1: 0.375rem;
  --space-2: 0.625rem;
  --space-3: 0.875rem;
  --space-4: 1.25rem;
  --space-5: 1.75rem;
  --space-6: 2.25rem;

  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;

  color-scheme: dark;
}
