/* ==========================================================================
   RanAdmin - base styles (tokens, reset, typography)
   Designed & developed by ufdev
   ========================================================================== */
:root {
    color-scheme: dark;
    --bg: #080b12;
    --bg-2: #0d121c;
    --surface: #111827;
    --surface-2: #161f30;
    --surface-3: #1d2840;
    --border: #233049;
    --border-strong: #2f3f5f;
    --text: #e6ebf5;
    --text-2: #a5b0c6;
    --muted: #6f7c96;

    --accent: #6d7cff;
    --accent-2: #22d3ee;
    --accent-soft: rgba(109, 124, 255, .14);
    --green: #34d399;
    --green-soft: rgba(52, 211, 153, .13);
    --red: #f87171;
    --red-soft: rgba(248, 113, 113, .13);
    --amber: #fbbf24;
    --amber-soft: rgba(251, 191, 36, .13);
    --blue: #60a5fa;
    --blue-soft: rgba(96, 165, 250, .13);
    --violet: #a78bfa;
    --violet-soft: rgba(167, 139, 250, .13);
    --teal: #2dd4bf;
    --teal-soft: rgba(45, 212, 191, .13);

    --radius: 14px;
    --radius-sm: 9px;
    --shadow: 0 10px 30px -12px rgba(0, 0, 0, .6);
    --font: "IBM Plex Sans Thai", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
    --sidebar-w: 264px;
    --topbar-h: 64px;
    --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--text);
    background: var(--bg);
    min-height: 100vh;
}
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono { font-family: var(--mono); font-size: .92em; }
small { font-size: .82em; }
img, svg { display: inline-block; vertical-align: middle; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
::selection { background: var(--accent); color: #fff; }

.icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-xs { width: 13px; height: 13px; }
.icon-xl { width: 44px; height: 44px; stroke-width: 1.4; }

.muted { color: var(--muted); }
.block { display: block; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.truncate { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wrap { white-space: normal; word-break: break-word; max-width: 420px; }
.credit { color: var(--accent-2); font-weight: 700; }

/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 9px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}