/* ============================================================================
   MEKONG.TH HOLDING — Unified Design System
   Palette: White + Petrol Teal (Xanh cổ vịt). Light is the default theme.
   NOTE: legacy accent variable names (--gold*) are kept on purpose so the
   hundreds of existing references keep working — only the VALUES changed
   from purple to teal. Do not rename them.
   ============================================================================ */

:root{
  /* ── Accent · Petrol teal (xanh cổ vịt) ── */
  --teal-700:#0a5f68; --teal-600:#0e7c86; --teal-500:#1295a0;
  --teal-400:#2bb8c4; --teal-300:#7fd6dd;
  --gold:#0e7c86; --gold-dark:#0a5f68; --gold-light:#1295a0;
  --gold-glow:rgba(14,124,134,.15);
  --mekong:#1295a0;

  /* Shared scalar tokens (modern: softer radius + snappy transitions) */
  --radius:12px; --radius-sm:8px; --radius-lg:16px;
  --transition:.18s ease;
  --ring:0 0 0 3px rgba(14,124,134,.22);

  /* Status colors */
  --green:#0e9f6e; --red:#e02424; --blue:#1c64f2; --yellow:#c98a04;
}

/* ── LIGHT (default) ───────────────────────────────────────────────────── */
:root,
[data-theme="light"]{
  --bg:#f7fbfc;          /* app background — bright, near-white */
  --bg2:#ffffff;         /* cards / header / modals */
  --bg3:#eef5f6;         /* inputs / subtle fills */
  --bg4:#e1ecee;         /* hover / selected fills */
  --border:rgba(13,55,62,.10);
  --border2:rgba(14,124,134,.42);
  --text:#0b2025;        /* near-black petrol */
  --text-body:#22363c;
  --text2:#5e747a;
  --text3:#90a4aa;
  --gold:#0e7c86; --gold-dark:#0a5f68; --gold-light:#1295a0;
  --gold-glow:rgba(14,124,134,.13);
  --mekong:#1295a0;
  --green:#0e9f6e; --red:#e02424; --blue:#1c64f2; --yellow:#c98a04;
  --shadow:rgba(12,33,37,.08);
  --tag-bg:rgba(14,124,134,.07);
  color-scheme:light;
}

/* ── DARK (refined petrol-charcoal, modern — not neon) ─────────────────── */
[data-theme="dark"]{
  --bg:#0b1116;          /* deep cool slate-ink (cleaner, not green-muddy) */
  --bg2:#151d23;         /* cards — clearly lifted for hierarchy */
  --bg3:#1c262d;         /* inputs / subtle fills */
  --bg4:#27343c;         /* hover / selected */
  --border:rgba(150,185,200,.12);
  --border2:rgba(48,196,208,.40);
  --text:#e9eef1;
  --text-body:#bcc9cf;
  --text2:#8a98a0;
  --text3:#5e6c74;
  --gold:#1ca7b4; --gold-dark:#137f8b; --gold-light:#3fc8d6;
  --gold-glow:rgba(28,167,180,.16);
  --mekong:#3fc8d6;
  --green:#34d399; --red:#f87171; --blue:#60a5fa; --yellow:#fbbf24;
  --shadow:rgba(0,0,0,.55);
  --tag-bg:rgba(28,167,180,.11);
  color-scheme:dark;
}

/* ── Modern base polish (element-level, safe across pages) ─────────────── */
html{ -webkit-text-size-adjust:100%; }
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* Accent text selection */
::selection{ background:rgba(14,124,134,.22); color:inherit; }

/* Clear, on-brand keyboard focus ring */
:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
a:focus-visible,button:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:none; box-shadow:var(--ring);
}

/* Slim, themed scrollbars */
*{ scrollbar-width:thin; scrollbar-color:var(--text3) transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{
  background:color-mix(in srgb, var(--text3) 55%, transparent);
  border-radius:999px;
  border:2px solid transparent;
  background-clip:content-box;
}
*::-webkit-scrollbar-thumb:hover{
  background:color-mix(in srgb, var(--gold) 70%, transparent);
  background-clip:content-box;
}