:root {
  /* ---- Brand palette (base) ---- */
  --teal: #0ABFA3;          /* brand accent */
  --teal-600: #08A98F;      /* hover / pressed-darker */
  --teal-700: #06806D;      /* deep teal */
  --teal-100: #C9F2EA;      /* tint surface */
  --teal-50:  #E8F9F5;      /* faint tint */

  --paper: #F7F5F0;         /* warm paper — light background */
  --paper-dim: #EFEDE6;     /* slightly darker paper, hover/section */
  --white: #FFFFFF;

  --charcoal: #1A1814;      /* warm charcoal — headers / dark bg */
  --charcoal-soft: #2A2723; /* raised dark surface */
  --gray: #8B8B8B;          /* body / muted text */
  --gray-strong: #5C5A56;   /* secondary text on light */
  --line: #E3E0D8;          /* hairline borders on paper */
  --line-dark: #38332D;     /* hairline borders on dark */

  /* ---- Semantic aliases (light theme) ---- */
  --bg: var(--paper);
  --surface: var(--white);
  --surface-card: var(--white);
  --surface-sunken: var(--paper-dim);
  --text-strong: var(--charcoal);
  --text-body: var(--gray-strong);
  --text-muted: var(--gray);
  --text-on-accent: var(--white);
  --border: var(--line);
  --accent: var(--teal);
  --accent-hover: var(--teal-600);
  --accent-tint: var(--teal-50);

  /* ---- Status ---- */
  --success: #1BA876;
  --warning: #E0A100;
  --danger:  #E5484D;
  --info:    var(--teal-700);
}

/* ---- Dark scope (warm charcoal canvas) ---- */
.vsibl-dark, [data-theme="dark"] {
  --bg: var(--charcoal);
  --surface: var(--charcoal-soft);
  --surface-card: var(--charcoal-soft);
  --surface-sunken: #211E1A;
  --text-strong: var(--paper);
  --text-body: #C7C3BA;
  --text-muted: var(--gray);
  --border: var(--line-dark);
  --accent-tint: rgba(10,191,163,0.14);
}