/* iotBind platform — identity layer on top of Tabler, the colors and components of iotbind.com (public_html/assets/css/site.css) */

/* ---------- fonts (SIL OFL 1.1, self-hosted, same files as iotbind.com) ---------- */
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("../fonts/inter-cyrillic-wght-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("../fonts/inter-cyrillic-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("../fonts/inter-greek-wght-normal.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("../fonts/inter-vietnamese-wght-normal.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-display: swap; font-weight: 400; src: url("../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-display: swap; font-weight: 600; src: url("../fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-display: swap; font-weight: 700; src: url("../fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }

/* ---------- tokens (light) ---------- */
:root, [data-bs-theme=light] {
  --brand-1: #ff7a18;
  --brand-2: #f43f5e;
  --brand-3: #db2777;
  --brand: #e11d48;
  --brand-strong: #be123c;
  --brand-text: #be123c;
  --accent: #149dcc;
  --brand-gradient: linear-gradient(120deg, var(--brand-1) 0%, var(--brand-2) 55%, var(--brand-3) 100%);
  --ink: #0f172a;
  --muted: #5b6475;
  --surface: #ffffff;
  --surface-alt: #f7f8fb;
  --line: #e7e9f0;
  --radius: 1rem;
  --radius-sm: .65rem;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);
  --shadow: 0 10px 30px -12px rgba(15, 23, 42, .18);
  --shadow-lg: 0 30px 60px -20px rgba(15, 23, 42, .3);
  --font: "Inter", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --font-ar: "IBM Plex Sans Arabic", "Inter", system-ui, "Segoe UI", Tahoma, Arial, sans-serif;

  --tblr-font-sans-serif: var(--font);
  --tblr-primary: #e11d48;
  --tblr-primary-rgb: 225, 29, 72;
  --tblr-primary-fg: #ffffff;
  --tblr-primary-darken: #be123c;
  --tblr-primary-lt: #fff1f3;
  --tblr-primary-lt-rgb: 255, 241, 243;
  --tblr-primary-text-emphasis: #881337;
  --tblr-primary-bg-subtle: #ffe4e6;
  --tblr-primary-border-subtle: #fda4af;
  --tblr-link-color: #c8143f;
  --tblr-link-color-rgb: 200, 20, 63;
  --tblr-link-hover-color: #9f1239;
  --tblr-link-hover-color-rgb: 159, 18, 57;
  --tblr-body-color: #1f2937;
  --tblr-body-color-rgb: 31, 41, 55;
  --tblr-body-bg: #f7f8fb;
  --tblr-body-bg-rgb: 247, 248, 251;
  --tblr-border-color: #e7e9f0;
  --tblr-border-radius: .6rem;
  --tblr-border-radius-sm: .45rem;
  --tblr-border-radius-lg: .8rem;
  --tblr-focus-ring-color: rgba(244, 63, 94, .35);
  --tblr-active-bg: rgba(244, 63, 94, .06);
}
[dir=rtl] { --tblr-font-sans-serif: var(--font-ar); }
html[lang="th"] body, html[lang="hi"] body, html[lang="bn"] body { line-height: 1.6; }

/* ---------- tokens (dark) ---------- */
[data-bs-theme=dark] {
  --ink: #f1f5f9;
  --muted: #a3acbd;
  --surface: #111827;
  --surface-alt: #0b1220;
  --line: #243044;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow: 0 10px 30px -12px rgba(0, 0, 0, .6);
  --brand: #fb7185;
  --brand-strong: #fda4af;
  --brand-text: #fb7185;

  --tblr-primary: #f43f5e;
  --tblr-primary-rgb: 244, 63, 94;
  --tblr-primary-darken: #e11d48;
  --tblr-primary-lt: #2a1420;
  --tblr-primary-lt-rgb: 42, 20, 32;
  --tblr-primary-text-emphasis: #fda4af;
  --tblr-primary-bg-subtle: #2a0a14;
  --tblr-primary-border-subtle: #9f1239;
  --tblr-link-color: #fb7185;
  --tblr-link-color-rgb: 251, 113, 133;
  --tblr-link-hover-color: #fda4af;
  --tblr-link-hover-color-rgb: 253, 164, 175;
  --tblr-body-color: #dbe2ec;
  --tblr-body-color-rgb: 219, 226, 236;
  --tblr-body-bg: #0b1120;
  --tblr-body-bg-rgb: 11, 17, 32;
  --tblr-bg-surface: #111827;
  --tblr-bg-surface-secondary: #131c2e;
  --tblr-bg-surface-tertiary: #0f1828;
  --tblr-bg-surface-dark: #0b1120;
  --tblr-bg-forms: #0f1828;
  --tblr-secondary-bg: #131c2e;
  --tblr-tertiary-bg: #0f1828;
  --tblr-active-bg: #1a2438;
  --tblr-code-bg: #131c2e;
  --tblr-border-color: #243044;
  --tblr-border-color-translucent: rgba(148, 163, 184, .14);
}

/* ---------- base ---------- */
body { font-feature-settings: "cv03", "cv04", "cv11"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.page-title, .card-title, .h1, .h2, .h3, h1, h2, h3 { color: var(--ink); }
:focus-visible { outline: 3px solid var(--tblr-focus-ring-color); outline-offset: 2px; }
::selection { background: rgba(244, 63, 94, .2); }
.text-brand { color: var(--brand-text) !important; }
.text-gradient { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bg-brand { background: var(--brand-gradient) !important; color: #fff !important; }

/* ---------- buttons ---------- */
.btn { font-weight: 600; }
.btn-primary { background-image: var(--brand-gradient); box-shadow: 0 8px 20px -8px rgba(244, 63, 94, .6); transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.btn-primary:hover, .btn-primary:focus-visible { filter: saturate(1.1) brightness(1.04); transform: translateY(-1px); box-shadow: 0 12px 26px -10px rgba(244, 63, 94, .7); }
.btn-primary:active, .btn-primary:disabled, .btn-primary.disabled { transform: none; }
.btn-group > .btn-primary:hover, .input-group > .btn-primary:hover { transform: none; }

/* ---------- navbar ---------- */
.navbar { --tblr-navbar-active-border-color: var(--brand-2); }
.navbar .nav-link:hover { color: var(--ink); }
.navbar .nav-item.active > .nav-link { color: var(--brand-text); }
.navbar .nav-item.active > .nav-link .nav-link-icon { color: var(--brand); }
.dropdown-menu { border-color: var(--line); box-shadow: var(--shadow); }
.dropdown-item:hover { color: var(--ink); }
.dropdown-item.active, .dropdown-item:active { color: var(--brand-text); background: rgba(244, 63, 94, .08); }

/* ---------- cards ---------- */
.card { --tblr-card-border-radius: var(--radius); --tblr-card-border-color: var(--line); --tblr-card-box-shadow: var(--shadow-sm); }
.card-link:hover, .card-link-pop:hover { border-color: rgba(244, 63, 94, .25); box-shadow: var(--shadow); }
.card-md { box-shadow: var(--shadow); }

/* ---------- forms ---------- */
.form-label { font-weight: 600; color: var(--ink); }
.form-control, .form-select { border-color: var(--line); }
.form-control:focus, .form-select:focus { border-color: rgba(244, 63, 94, .55); box-shadow: 0 0 0 .2rem var(--tblr-focus-ring-color); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-check-input:focus { border-color: var(--brand); box-shadow: 0 0 0 .2rem var(--tblr-focus-ring-color); }

/* ---------- misc ---------- */
.nav-tabs .nav-link.active { color: var(--brand-text); }
.page-link:hover { color: var(--brand-text); }
.link-secondary:hover, .link-muted:hover { color: var(--brand) !important; }
.footer { border-top: 1px solid var(--line); }

@media (prefers-reduced-motion: reduce) {
  .btn-primary, .btn-primary:hover { transition: none; transform: none; }
}
@media print {
  .btn-primary { box-shadow: none; }
}
