:root {
  /* Core — synced with React Native mobile app theme */
  --md-sys-color-primary: #E6C878;
  --md-sys-color-on-primary: #2A2100;
  --md-sys-color-primary-container: #5E4A17;
  --md-sys-color-on-primary-container: #F1E1B8;
  --md-sys-color-secondary: #B8C0CC;
  --md-sys-color-on-secondary: #1B2028;
  --md-sys-color-secondary-container: #3C424D;
  --md-sys-color-on-secondary-container: #DDE1EA;
  --md-sys-color-tertiary: #BFC4CB;
  --md-sys-color-on-tertiary: #161A20;
  --md-sys-color-tertiary-container: #2A2F36;
  --md-sys-color-on-tertiary-container: #E1E3E7;
  --md-sys-color-error: #E08D8D;
  --md-sys-color-on-error: #4A0A0A;
  --md-sys-color-error-container: #4A1515;
  --md-sys-color-on-error-container: #FFE0E0;
  --md-sys-color-background: #121212;
  --md-sys-color-on-background: #FFFFFF;
  --md-sys-color-surface: #181818;
  --md-sys-color-on-surface: #FFFFFF;
  --md-sys-color-surface-variant: #242424;
  --md-sys-color-on-surface-variant: #E6E6E6;
  --md-sys-color-outline: #3D3D3D;
  --md-sys-color-outline-variant: #2A2A2A;
  --md-sys-color-shadow: #000000;
  --md-sys-color-scrim: #000000;
  --md-sys-color-inverse-surface: #E6E6E6;
  --md-sys-color-inverse-on-surface: #1A1A1A;
  --md-sys-color-inverse-primary: #C9A24D;

  /* Surface containers — derived from background/surface/surfaceVariant progression */
  --md-sys-color-surface-container-lowest: #0F0F0F;
  --md-sys-color-surface-container-low: #151515;
  --md-sys-color-surface-container: #181818;
  --md-sys-color-surface-container-high: #1E1E1E;
  --md-sys-color-surface-container-highest: #222222;

  /* Material-ish shape + motion helpers (optional) */
  --md-sys-shape-corner-sm: 8px;
  --md-sys-shape-corner-md: 12px;
  --md-sys-shape-corner-lg: 16px;
  --md-sys-state-hover-opacity: 0.08;
  --md-sys-state-focus-opacity: 0.12;
  --md-sys-state-pressed-opacity: 0.12;
  --md-sys-state-dragged-opacity: 0.16;
}