:root {
  /* Brand */
  --green-main: #2f6f62;
  --green-dark: #1b6e60;
  --green-light: #e6f4f1;
  --green: #2D6A5C;

  --text-dark: #1c1c1c;
  --text-muted: #6b6b6b;
  --white: #ffffff;
  /* UI sizing  */
  --container-width: 1200px;
  --ui-btn-h: 56px;

  /* THEME TOKENS (LIGHT default) */
  --bg: #EAF4F1;            /* page background */
  --bg-soft: #eaf7f3;       /* section background (hero, auth, etc.) */
  --surface: #ffffff;       /* cards, header */
  --text: #1c1c1c;
  --muted: #6b6b6b;
  --border: rgba(0,0,0,0.14);
  --shadow: rgba(0,0,0,0.08);

  --header-bg: var(--surface);
  --drawer-bg: var(--green-dark);

  --input-bg: #ffffff;
  --input-border: rgba(0,0,0,0.22);

  --header-radius: 18px;
}

/* System dark (якщо користувач не обрав вручну) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0f1715;
    --bg-soft: #111d1a;
    --surface: #13201d;
    --text: #e9f2ef;
    --muted: rgba(233,242,239,0.72);
    --border: rgba(255,255,255,0.14);
    --shadow: rgba(0,0,0,0.45);

    --header-bg: #0f1715;
    --drawer-bg: #0d1412;

    --input-bg: #0f1715;
    --input-border: rgba(255,255,255,0.18);

    --surface-2: #f9fbfa;      /* light section bg */
    --surface-3: #f5f7f6;      /* light card bg */
    --accent-soft: #eaf7f3;    /* hover / highlight */
    --toggle-track: #dfeee8;   /* pricing toggle track */
  }
}

/* Manual dark (коли ти перемкнув кнопкою) */
:root[data-theme="dark"] {
  --bg: #0f1715;
  --bg-soft: #111d1a;
  --surface: #13201d;
  --text: #e9f2ef;
  --muted: rgba(233,242,239,0.72);
  --border: rgba(255,255,255,0.14);
  --shadow: rgba(0,0,0,0.45);

  --header-bg: #0f1715;
  --drawer-bg: #0d1412;

  --input-bg: #0f1715;
  --input-border: rgba(255,255,255,0.18);

  --surface-2: #101a17;
  --surface-3: #0f1715;
  --accent-soft: rgba(47, 111, 98, 0.14);
  --toggle-track: rgba(255,255,255,0.10);
}