/* ============================================================
   ENVOY — Design Tokens (dark mode)
   Load after envoy-tokens.css. Applies when the root has
   data-theme="dark" (RN: useColorScheme() === 'dark' → pick the
   dark palette). Only colours change; type, spacing, radius and
   motion are shared with light. Names match envoy-tokens.css 1:1.
   ============================================================ */

[data-theme="dark"] {
  /* ---------- Text ---------- */
  --text-primary:        #F2F2EF;
  --text-secondary:      #A3A3A0;
  --text-tertiary:       #6F6F6C;
  --text-muted:          #5E6570;
  --text-on-dark:        #FFFFFF;                  /* still white: used on coloured tiles */
  --text-link:           #6AA8FF;
  --text-success:        #4CD471;
  --text-destructive:    #FF6961;

  /* ---------- Backgrounds ---------- */
  --bg-page:             #0A0A0A;
  --bg-primary:          #161616;
  --bg-subtle:           #232323;
  --bg-dark:             #F2F2EF;                  /* inverted: primary button is light on dark */
  --bg-ink:              #F2F2EF;                  /* display headings, wordmark */

  /* ---------- Borders ---------- */
  --border-default:      #2A2A2A;
  --border-light:        #3D3D3D;
  --border-muted:        #333A42;

  /* ---------- Tints & system ---------- */
  --tint-green:          rgba(76,212,113,0.18);
  --tint-blue:           rgba(106,168,255,0.18);
  --tint-warm:           rgba(217,119,87,0.20);
  --tint-red:            rgba(255,105,97,0.16);
  --ios-separator:       rgba(84,84,88,0.45);
  --ios-segment-bg:      rgba(118,118,128,0.24);
  --ios-scrim:           rgba(0,0,0,0.56);
  --ios-grabber:         rgba(235,235,245,0.30);

  /* ---------- Shadows ---------- */
  --shadow-card:         0 0 0 1px rgba(255,255,255,0.06);
  --shadow-pill:         0 0 0 1px rgba(255,255,255,0.08);
  --shadow-button-inset: inset 0 -2px 1px rgba(0,0,0,0.18);
  --shadow-float:        0 8px 32px rgba(0,0,0,0.6), 0 0 0 0.5px rgba(255,255,255,0.10);
}

/* Inverted primary button: light fill needs dark ink (text-on-dark stays white for tiles) */
[data-theme="dark"] .btn--primary,
[data-theme="dark"] .list__icon--ink,
[data-theme="dark"] .tabbar__item.is-active,
[data-theme="dark"] .chip.is-active,
[data-theme="dark"] .pill--inverse { color: #0B0B0B; }
[data-theme="dark"] .stage, [data-theme="dark"] body { background-color: #050505; }
[data-theme="dark"] .device { box-shadow: 0 40px 100px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.10); }