/* Nexus ECM — design tokens + base components (shared by every page) */

:root {
  --font-display: "Anuphan", "IBM Plex Sans Thai", system-ui, sans-serif;
  --font-body: "IBM Plex Sans Thai", "Anuphan", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo, monospace;

  /* brand */
  --ink: #0B1020;
  --cobalt: #2F5BFF;
  --mint: #2EE6A6;
  --amber: #FFB547;
  --coral: #FF6B5B;
  --brand-red: #83141A; /* "DIGITAL" in the Nexus Digital wordmark */

  /* light theme */
  --bg: #F4F6FB;
  --bg-elev: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F1F3F9;
  --surface-3: #E8EBF4;
  --border: #E2E6EF;
  --border-strong: #CDD3E1;
  --text: #0E1428;
  --text-2: #3A4256;
  --muted: #5E6880;
  --faint: #8C95AA;
  --primary: #2F5BFF;
  --primary-hover: #2248E6;
  --primary-soft: #EBF0FF;
  --primary-ink: #FFFFFF;
  --success: #0E9F6E;
  --success-soft: #E3F8EF;
  --warning: #C77700;
  --warning-soft: #FFF4DE;
  --danger: #E5484D;
  --danger-soft: #FDECEC;
  --ai: #7C5CFF;
  --ai-soft: #F1EDFF;
  --focus: 0 0 0 3px rgba(47, 91, 255, .28);
  --shadow-sm: 0 1px 2px rgba(14, 20, 40, .06), 0 1px 1px rgba(14, 20, 40, .04);
  --shadow-md: 0 6px 18px -6px rgba(14, 20, 40, .14), 0 2px 6px rgba(14, 20, 40, .06);
  --shadow-lg: 0 24px 60px -18px rgba(14, 20, 40, .28), 0 8px 20px -8px rgba(14, 20, 40, .12);
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand-red: #F2737B;
    --bg: #080C17;
    --bg-elev: #0F1526;
    --surface: #10172A;
    --surface-2: #161E34;
    --surface-3: #1E2742;
    --border: #232C47;
    --border-strong: #33405F;
    --text: #E9EDF7;
    --text-2: #C6CCDB;
    --muted: #98A1B7;
    --faint: #6C7690;
    --primary: #6E8BFF;
    --primary-hover: #8AA2FF;
    --primary-soft: rgba(110, 139, 255, .14);
    --primary-ink: #0B1020;
    --success: #34D399;
    --success-soft: rgba(52, 211, 153, .13);
    --warning: #FBBF24;
    --warning-soft: rgba(251, 191, 36, .13);
    --danger: #FF6B6F;
    --danger-soft: rgba(255, 107, 111, .13);
    --ai: #A48BFF;
    --ai-soft: rgba(164, 139, 255, .14);
    --focus: 0 0 0 3px rgba(110, 139, 255, .35);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 8px 22px -8px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .3);
    --shadow-lg: 0 30px 70px -20px rgba(0, 0, 0, .75), 0 10px 24px -10px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --brand-red: #F2737B;
  --bg: #080C17;
  --bg-elev: #0F1526;
  --surface: #10172A;
  --surface-2: #161E34;
  --surface-3: #1E2742;
  --border: #232C47;
  --border-strong: #33405F;
  --text: #E9EDF7;
  --text-2: #C6CCDB;
  --muted: #98A1B7;
  --faint: #6C7690;
  --primary: #6E8BFF;
  --primary-hover: #8AA2FF;
  --primary-soft: rgba(110, 139, 255, .14);
  --primary-ink: #0B1020;
  --success: #34D399;
  --success-soft: rgba(52, 211, 153, .13);
  --warning: #FBBF24;
  --warning-soft: rgba(251, 191, 36, .13);
  --danger: #FF6B6F;
  --danger-soft: rgba(255, 107, 111, .13);
  --ai: #A48BFF;
  --ai-soft: rgba(164, 139, 255, .14);
  --focus: 0 0 0 3px rgba(110, 139, 255, .35);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 8px 22px -8px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .3);
  --shadow-lg: 0 30px 70px -20px rgba(0, 0, 0, .75), 0 10px 24px -10px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.25; margin: 0; font-weight: 600; letter-spacing: -.005em; }
p { margin: 0; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: rgba(47, 91, 255, .22); }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

/* buttons */
.btn {
  --b-bg: var(--surface);
  --b-fg: var(--text);
  --b-bd: var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 16px; border-radius: 10px;
  background: var(--b-bg); color: var(--b-fg); border: 1px solid var(--b-bd);
  font-weight: 500; font-size: 14px; white-space: nowrap; cursor: pointer; user-select: none;
  transition: background .15s, border-color .15s, transform .15s var(--ease), box-shadow .15s;
  text-decoration: none !important;
}
.btn:hover { background: var(--surface-2); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn[disabled], .btn.is-loading { opacity: .55; pointer-events: none; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { --b-bg: var(--primary); --b-fg: var(--primary-ink); --b-bd: transparent; box-shadow: 0 6px 16px -8px rgba(47, 91, 255, .7); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-ghost { --b-bg: transparent; --b-bd: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-danger { --b-bg: var(--danger); --b-fg: #fff; --b-bd: transparent; }
.btn-danger:hover { background: var(--danger); filter: brightness(1.06); }
.btn-ai { --b-bg: var(--ai-soft); --b-fg: var(--ai); --b-bd: transparent; }
.btn-ai:hover { background: var(--ai-soft); filter: brightness(.97); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.btn-lg { height: 48px; padding: 0 22px; font-size: 16px; border-radius: 12px; }
.btn-icon { width: 36px; padding: 0; }
.btn-icon.btn-sm { width: 32px; }
.btn-block { width: 100%; }

/* form */
.field { display: grid; gap: 6px; }
.field > span, .label { font-size: 13px; font-weight: 500; color: var(--text-2); }
.hint { font-size: 12.5px; color: var(--muted); }
.input, .select, .textarea {
  width: 100%; min-height: 40px; padding: 8px 12px; border-radius: 10px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  transition: border-color .15s, box-shadow .15s; outline: none;
}
.textarea { min-height: 84px; resize: vertical; line-height: 1.55; }
.input::placeholder, .textarea::placeholder { color: var(--faint); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--primary); box-shadow: var(--focus); }
.select { appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238C95AA' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.check input { width: 16px; height: 16px; accent-color: var(--primary); }

/* surfaces */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--surface-2); color: var(--text-2); white-space: nowrap; }
.badge-primary { background: var(--primary-soft); color: var(--primary); }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-ai { background: var(--ai-soft); color: var(--ai); }
.kbd { font-family: var(--font-mono); font-size: 11.5px; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--border-strong); border-bottom-width: 2px; color: var(--muted); background: var(--surface); }

.alert { padding: 10px 14px; border-radius: 10px; font-size: 14px; display: flex; gap: 10px; align-items: flex-start; }
.alert-danger { background: var(--danger-soft); color: var(--danger); }
.alert-info { background: var(--primary-soft); color: var(--primary); }

.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -.01em; color: var(--text); text-decoration: none !important; }
.brand img { width: 32px; height: 32px; }
.brand small { font-weight: 600; color: var(--brand-red); font-size: 12px; letter-spacing: .24em; margin-right: -.24em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}