/* ==========================================================================
   ECOSYSTEM PRO v3.6 — TOKEN "CORBEL" (4 bảng màu × sáng/tối)
   Giá trị lấy theo mã tham chiếu bạn gửi (corbel_reverse_engineering): :root = Pastel sáng; [data-theme=dark];
   [data-palette=mono|ocean|sage] và tổ hợp với tối. <html> luôn mang data-theme + data-palette
   (đặt trước khi vẽ bởi đoạn script nhỏ ở <head>, và đồng bộ bởi corbel.js).
   Màu tín hiệu giao dịch (--up / --down / --warn) lấy từ chính bảng màu này.
   ========================================================================== */
:root {
    --font: "Urbanist", "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --display: var(--font);
    --mono: var(--font);
    --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 12.5px; --fs-md: 13.5px; --fs-base: 14px; --fs-lg: 15px;
    --fs-xl: 17px; --fs-2xl: 20px; --fs-3xl: 22px; --fs-4xl: 26px; --fs-display: 34px;

    --bg: #e6ecef; --mesh-a: #bcd9f2; --mesh-b: #bfe6d6; --mesh-c: #f6cfc7;
    --glass: #ffffff80; --glass-2: #ffffffa8; --glass-3: #ffffffdb; --rim: #ffffffd1; --float: #fbfcfd;
    --panel: transparent; --surface: #fbfcfd; --surface-2: #ffffff8c;
    --well: #14202a0f; --line: #14202a17; --line-2: #14202a29;
    --shadow: 0 1px 0 #ffffffb3 inset, 0 24px 48px -30px #1c3c524d;
    --shadow-lift: 0 1px 2px #14202a0d, 0 14px 30px -16px #1c3c524d;
    --shadow-pop: 0 24px 60px -18px #14283857, 0 2px 6px #14283814;
    --text: #14202a; --muted: #4c5a65; --faint: #5f6d78;
    --primary: #2a6f9a; --primary-2: #8ec3ea; --primary-ink: #1d5578; --primary-soft: #d6e8f5; --on-primary: #fff;
    --ink-btn: #14202a; --on-ink-btn: #f3f7f8; --pill: #14202a; --on-pill: #f3f7f8; --dock: #14202a; --on-dock: #f3f7f8;
    --sky: #a9d2f1; --mint: #a7e1ca; --coral: #f6b4a3; --lemon: #f1e08f;
    --ocean: #1f4d6a; --on-ocean: #f3f7f8; --oc-1: #a9d2f1; --oc-2: #a7e1ca; --oc-3: #f1e08f;
    --sat: 1; --on-tile: #14202a;
    --c1: #2a6f9a; --c2: #8ec3ea; --c3: #2f9a7e; --c4: #df7659; --c5: #cf9426;
    --hatch: #2a6f9a38; --hatch-bg: #2a6f9a0d;
    --heat-0: #e3ebef; --heat-1: #cbe1f0; --heat-2: #98c5e5; --heat-3: #5a9bc8; --heat-4: #2a6f9a;
    --up: #22735c; --up-soft: #d5eee4; --down: #b1412a; --down-soft: #f8e1da;
    --warn: #85580a; --warn-soft: #f5ead2; --sea: #1b6e78; --sea-soft: #d3ecee;
    --r-xs: 8px; --r-sm: 14px; --r: 22px; --r-lg: 28px;
    --ease: cubic-bezier(.2, .8, .2, 1);
    --dock-x: 20px; --dock-w: 60px; --gut: clamp(16px, 1.6vw, 28px); --app-max: 1840px;
    --side-w: calc(var(--dock-x) + var(--dock-w)); --tabbar-h: 0px;
    color-scheme: light;
}
:root[data-theme="dark"] {
    --bg: #0c1216; --mesh-a: #468cc852; --mesh-b: #2ea0803d; --mesh-c: #e6785f26;
    --glass: #ffffff0d; --glass-2: #ffffff16; --glass-3: #1d272e; --rim: #ffffff13; --float: #1a242b;
    --surface: #172129; --surface-2: #ffffff0f; --well: #fff1; --line: #ffffff16; --line-2: #ffffff29;
    --shadow: 0 1px 0 #ffffff0d inset, 0 24px 48px -30px #000000b3;
    --shadow-lift: 0 1px 2px #0000004d, 0 14px 32px -16px #000000bf;
    --shadow-pop: 0 24px 60px -18px #000000b3, 0 0 0 1px #ffffff14;
    --text: #e8eef1; --muted: #a7b3bb; --faint: #8d9aa3;
    --primary: #79b6e3; --primary-2: #a9d2f1; --primary-ink: #a9d2f1; --primary-soft: #79b6e326; --on-primary: #0c1216;
    --ink-btn: #e8eef1; --on-ink-btn: #0f171c; --pill: #e8eef1; --on-pill: #0f171c; --dock: #ffffff14; --on-dock: #e8eef1;
    --ocean: #24597a;
    --c1: #79b6e3; --c2: #b8daf3; --c3: #5fcaa8; --c4: #f09a82; --c5: #e7b552;
    --hatch: #8cc3eb42; --hatch-bg: #8cc3eb0f;
    --heat-0: #172128; --heat-1: #1d3a50; --heat-2: #27597b; --heat-3: #3e83b4; --heat-4: #8ec3ea;
    --up: #6fd3b0; --up-soft: #6fd3b021; --down: #f2937c; --down-soft: #f2937c21;
    --warn: #e8bd62; --warn-soft: #e8bd6221; --sea: #6ccbd3; --sea-soft: #6ccbd321;
    color-scheme: dark;
}
:root[data-palette="mono"] {
    --bg: #efefed; --mesh-a: #e1e1de; --mesh-b: #f9f9f7; --mesh-c: #e6e6e3;
    --glass: #ffffffa3; --glass-2: #ffffffc7; --glass-3: #fffffff0; --rim: #ffffffeb; --float: #fcfcfb; --surface: #fcfcfb;
    --well: #1111110f; --line: #11111117; --line-2: #1111112b;
    --shadow: 0 1px 0 #fffc inset, 0 22px 44px -30px #00000038;
    --text: #121212; --muted: #4f4f4c; --faint: #636360;
    --primary: #121212; --primary-2: #a3a39e; --primary-ink: #121212; --primary-soft: #e4e4e1; --on-primary: #fff;
    --pill: #121212; --on-pill: #f6f6f4; --ink-btn: #121212; --on-ink-btn: #f6f6f4; --dock: #121212; --on-dock: #f6f6f4;
    --sky: #121212; --mint: #fff; --lemon: #e2e2de; --coral: #d2d2cd; --ocean: #121212;
    --oc-1: #fff; --oc-2: #8e8e89; --oc-3: #cfcfca;
    --c1: #121212; --c2: #b4b4af; --c3: #6a6a66; --c4: #8e8e89; --c5: #c8c8c3;
    --hatch: #00000029; --hatch-bg: #00000009;
    --heat-0: #e8e8e5; --heat-1: #d0d0cc; --heat-2: #a6a6a1; --heat-3: #696965; --heat-4: #121212;
    --sea: #3f3f3c; --sea-soft: #e4e4e1; --sat: 0;
}
:root[data-palette="mono"][data-theme="dark"] {
    --bg: #0b0b0b; --mesh-a: #ffffff0d; --mesh-b: #ffffff06; --mesh-c: #ffffff09;
    --glass: #ffffff0b; --glass-2: #ffffff14; --glass-3: #202020; --rim: #ffffff13; --float: #1a1a1a; --surface: #161616;
    --well: #fff1; --line: #ffffff16; --line-2: #ffffff29;
    --shadow: 0 1px 0 #ffffff0d inset, 0 24px 48px -30px #000c;
    --text: #ededeb; --muted: #a9a9a5; --faint: #8e8e8a;
    --primary: #ededeb; --primary-2: #6c6c68; --primary-ink: #fff; --primary-soft: #ffffff1a; --on-primary: #111;
    --pill: #ededeb; --on-pill: #111; --ink-btn: #ededeb; --on-ink-btn: #111; --dock: #ffffff14; --on-dock: #ededeb;
    --sky: #f0f0ee; --mint: #d6d6d2; --lemon: #c2c2bd; --coral: #ababa6; --ocean: #222;
    --c1: #ededeb; --c2: #6c6c68; --c3: #a9a9a5; --c4: #8e8e8a; --c5: #c4c4bf;
    --hatch: #fff3; --hatch-bg: #ffffff0a;
    --heat-0: #1a1a1a; --heat-1: #2e2e2e; --heat-2: #4c4c4a; --heat-3: #8a8a86; --heat-4: #ededeb;
    --sea: #c4c4bf; --sea-soft: #ffffff1a;
}
:root[data-palette="ocean"] {
    --bg: #e4ebf0; --mesh-a: #b4d3ef; --mesh-b: #b6e2e6; --mesh-c: #cfe0f3;
    --sky: #9fcbef; --mint: #9fdce0; --lemon: #cfe3f5; --coral: #8fc6d6; --ocean: #173f5f;
    --oc-1: #9fcbef; --oc-2: #9fdce0; --oc-3: #fff;
}
:root[data-palette="ocean"][data-theme="dark"] {
    --bg: #0a1118; --mesh-a: #3c82c857; --mesh-b: #28a0aa3d; --mesh-c: #5a8cd229; --ocean: #1e4c70;
}
:root[data-palette="sage"] {
    --bg: #e9ebe4; --mesh-a: #cfe3c8; --mesh-b: #e6e2c6; --mesh-c: #c9e2d6;
    --primary: #2f6b4f; --primary-2: #9ccdb2; --primary-ink: #245640; --primary-soft: #dcede3;
    --sky: #bfe0c4; --mint: #a9dcc6; --lemon: #ece2a8; --coral: #e9c9a7; --ocean: #234a3a;
    --oc-1: #bfe0c4; --oc-2: #ece2a8; --oc-3: #fff;
    --c1: #2f6b4f; --c2: #9ccdb2; --c3: #5c9a3e; --c4: #d0864f; --c5: #c79a2a;
    --hatch: #2f6b4f38; --hatch-bg: #2f6b4f0d;
    --heat-0: #e5ebe3; --heat-1: #cfe5d6; --heat-2: #9fcbb0; --heat-3: #5f9e7c; --heat-4: #2f6b4f;
}
:root[data-palette="sage"][data-theme="dark"] {
    --bg: #0c120f; --mesh-a: #50a06e47; --mesh-b: #c8b45a24; --mesh-c: #3c968233;
    --primary: #8fd1ad; --primary-2: #b9e3c8; --primary-ink: #b9e3c8; --primary-soft: #8fd1ad26; --ocean: #2a5845;
    --c1: #8fd1ad; --c2: #c9e8d3; --c3: #a6d36f; --c4: #f0a576; --c5: #e7c159;
    --hatch: #96d7af42; --hatch-bg: #96d7af0f;
    --heat-0: #151d18; --heat-1: #1d3a2b; --heat-2: #295c43; --heat-3: #3f8d64; --heat-4: #8fd1ad;
}

/* ---------- Ô màu nhấn (tile): 1 màu nền + bộ biến chữ/viền đảo cho đọc rõ ---------- */
.tile--sky, .tile--mint, .tile--coral, .tile--lemon {
    --text: #14202a; --muted: #14202ac2; --faint: #14202ab3; --well: #14202a14; --line: #14202a1f; --line-2: #14202a33;
    --surface: #ffffffb3; --surface-2: #fff6; --up: #1b5e4a; --up-soft: #ffffff8c; --down: #8f3220; --down-soft: #ffffff8c;
    --primary: #14202a; --primary-ink: #14202a; --c1: #14202a; --c2: #14202a52; --c3: #14202a; --rim: #fff6; color: var(--text);
}
.tile--sky { background: var(--sky); } .tile--mint { background: var(--mint); } .tile--coral { background: var(--coral); } .tile--lemon { background: var(--lemon); }
.tile--ocean, :root[data-palette="mono"]:not([data-theme="dark"]) :is(.tile--sky) {
    --text: #f3f7f8; --muted: #f3f7f8c7; --faint: #f3f7f8b3; --well: #ffffff1f; --line: #ffffff24; --line-2: #ffffff3d;
    --surface: var(--ocean); --surface-2: #ffffff14; --up: #8fe3c4; --up-soft: #8fe3c429; --down: #ffb3a1; --down-soft: #ffb3a129;
    --primary: #f3f7f8; --primary-ink: #f3f7f8; --c1: var(--oc-1); --c2: var(--oc-2); --c4: var(--oc-3); --rim: #ffffff1a;
    background: var(--ocean); color: var(--text); box-shadow: none;
}