/* ============================================================
   JobBoard — Design tokens. Nền tảng dùng chung cho public + ops.
   Tầng 1: thang nguyên thuỷ (primitive). Không view nào dùng trực tiếp.
   Tầng 2: token ngữ nghĩa (semantic). Đây là thứ app.css/ops.css dùng.
   Đổi theme = sửa tầng 2, không đụng tầng 1.
   ============================================================ */

/* ---------- Tầng 1: primitive ---------- */
:root {
  /* Trung tính — thang lạnh, tương phản đã kiểm theo WCAG AA trên nền trắng */
  --gray-0:#fff;      --gray-25:#fcfcfd;  --gray-50:#f8f9fb;  --gray-100:#f1f3f6;
  --gray-200:#e4e7ec; --gray-300:#d0d5dd; --gray-400:#98a2b3; --gray-500:#667085;
  --gray-600:#475467; --gray-700:#344054; --gray-800:#1d2939; --gray-900:#101828;
  --gray-950:#0a0f1a;

  /* Thương hiệu — xanh lá sâu, giữ #0f6b4f gốc làm bậc 700 */
  --green-50:#ecfdf5;  --green-100:#d1fae5; --green-200:#a7f3d0; --green-300:#6ee7b7;
  --green-400:#34d399; --green-500:#10b981; --green-600:#0d8a63; --green-700:#0f6b4f;
  --green-800:#0b5540; --green-900:#083d2e; --green-950:#04231a;

  /* Xanh dương — accent của ops console (cố ý khác public để không nhầm môi trường) */
  --blue-50:#eff8ff;  --blue-100:#d1e9ff; --blue-200:#b2ddff; --blue-300:#84caff;
  --blue-400:#53b1fd; --blue-500:#2e90fa; --blue-600:#1570ef; --blue-700:#175cd3;
  --blue-800:#1849a9; --blue-900:#194185; --blue-950:#102a56;

  --red-50:#fef3f2;   --red-100:#fee4e2; --red-200:#fecdca; --red-300:#fda29b;
  --red-400:#f97066;  --red-500:#f04438; --red-600:#d92d20; --red-700:#b42318;
  --red-800:#912018;  --red-900:#7a271a; --red-950:#55160c;

  --amber-50:#fffaeb;  --amber-100:#fef0c7; --amber-200:#fedf89; --amber-300:#fec84b;
  --amber-400:#fdb022; --amber-500:#f79009; --amber-600:#dc6803; --amber-700:#b54708;
  --amber-800:#93370d; --amber-900:#7a2e0e; --amber-950:#4e1d09;

  /* Thang chữ — rem, base 16px. Cặp size/line-height đi liền nhau. */
  --text-xs:0.75rem;   --lh-xs:1.5;
  --text-sm:0.8125rem; --lh-sm:1.5;
  --text-md:0.875rem;  --lh-md:1.55;
  --text-base:1rem;    --lh-base:1.6;
  --text-lg:1.125rem;  --lh-lg:1.45;
  --text-xl:1.25rem;   --lh-xl:1.4;
  --text-2xl:1.5rem;   --lh-2xl:1.3;
  --text-3xl:1.875rem; --lh-3xl:1.22;
  --text-4xl:2.25rem;  --lh-4xl:1.15;

  --fw-normal:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  --tracking-tight:-0.014em; --tracking-wide:0.02em;

  --font-sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  /* Khoảng cách — base 4px */
  --sp-0:0;       --sp-1:0.25rem; --sp-2:0.5rem;  --sp-3:0.75rem; --sp-4:1rem;
  --sp-5:1.25rem; --sp-6:1.5rem;  --sp-7:2rem;    --sp-8:2.5rem;  --sp-9:3rem;
  --sp-10:4rem;   --sp-11:5rem;   --sp-12:6rem;

  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-2xl:20px; --r-full:999px;

  /* Chuyển động */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-fast:120ms; --dur:180ms; --dur-slow:280ms;

  /* Tầng chồng */
  --z-base:1; --z-sticky:100; --z-header:200; --z-sheet:300; --z-toast:400;

  /* Vùng chạm tối thiểu (WCAG 2.5.5) */
  --tap:44px;
  --tap-dense:32px;
}

/* ---------- Tầng 2: semantic (sáng) ---------- */
:root {
  --bg-canvas:var(--gray-0);
  --bg-surface:var(--gray-0);
  --bg-raised:var(--gray-0);
  --bg-subtle:var(--gray-50);
  --bg-muted:var(--gray-100);
  --bg-hover:var(--gray-50);
  --bg-active:var(--gray-100);
  --bg-inverse:var(--gray-900);

  --fg-default:var(--gray-900);
  --fg-strong:var(--gray-950);
  --fg-muted:var(--gray-600);
  --fg-subtle:var(--gray-500);
  --fg-inverse:var(--gray-0);
  --fg-disabled:var(--gray-400);

  --border-subtle:var(--gray-100);
  --border-default:var(--gray-200);
  --border-strong:var(--gray-300);

  --brand-fg:var(--green-700);
  --brand-fg-hover:var(--green-800);
  --brand-bg:var(--green-700);
  --brand-bg-hover:var(--green-800);
  --brand-bg-active:var(--green-900);
  --brand-bg-subtle:var(--green-50);
  --brand-border:var(--green-200);
  --brand-on:var(--gray-0);

  --accent-fg:var(--blue-700);
  --accent-bg:var(--blue-600);
  --accent-bg-hover:var(--blue-700);
  --accent-bg-subtle:var(--blue-50);
  --accent-border:var(--blue-200);
  --accent-on:var(--gray-0);

  --danger-fg:var(--red-700);
  --danger-bg:var(--red-600);
  --danger-bg-hover:var(--red-700);
  --danger-bg-subtle:var(--red-50);
  --danger-border:var(--red-200);
  --danger-on:var(--gray-0);

  --warn-fg:var(--amber-700);
  --warn-bg:var(--amber-500);
  --warn-bg-subtle:var(--amber-50);
  --warn-border:var(--amber-200);
  --warn-on:var(--gray-950);

  --ok-fg:var(--green-700);
  --ok-bg-subtle:var(--green-50);
  --ok-border:var(--green-200);

  --info-fg:var(--blue-700);
  --info-bg-subtle:var(--blue-50);
  --info-border:var(--blue-200);

  --focus-color:var(--green-500);
  /* KHÔNG ghép sẵn một token --focus-ring ở đây. var() nằm trong giá trị của
     một custom property được thay ngay tại nơi khai báo, nên --focus-ring sẽ
     "đóng băng" màu của :root và mọi override sau này (body.ops đổi sang xanh
     dương) không còn tác dụng — ring ops sẽ ra xanh lá. Viết thẳng box-shadow
     ở rule :focus-visible để var() được giải tại chính element đó. */

  --shadow-xs:0 1px 2px rgba(16,24,40,.05);
  --shadow-sm:0 1px 3px rgba(16,24,40,.10), 0 1px 2px rgba(16,24,40,.06);
  --shadow-md:0 4px 8px -2px rgba(16,24,40,.10), 0 2px 4px -2px rgba(16,24,40,.06);
  --shadow-lg:0 12px 16px -4px rgba(16,24,40,.08), 0 4px 6px -2px rgba(16,24,40,.03);
  --shadow-xl:0 20px 24px -4px rgba(16,24,40,.08), 0 8px 8px -4px rgba(16,24,40,.03);
  --shadow-up:0 -4px 12px -2px rgba(16,24,40,.10);

  --skeleton-from:var(--gray-100);
  --skeleton-to:var(--gray-200);
}

/* ---------- Tầng 2: semantic (tối) ----------
   Chỉ định nghĩa lại token ngữ nghĩa, không đụng thang primitive.
   Guard :not([data-theme=light]) để nút chuyển theme thắng được cả hai chiều. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-canvas:var(--gray-950);
    --bg-surface:#111827;
    --bg-raised:#161f2e;
    --bg-subtle:#0f1725;
    --bg-muted:#1b2436;
    --bg-hover:#1b2436;
    --bg-active:#222c40;
    --bg-inverse:var(--gray-50);

    --fg-default:var(--gray-100);
    --fg-strong:var(--gray-0);
    --fg-muted:var(--gray-400);
    --fg-subtle:#7d8798;
    --fg-inverse:var(--gray-900);
    --fg-disabled:var(--gray-600);

    --border-subtle:#1e2739;
    --border-default:#2a3347;
    --border-strong:#3b465e;

    --brand-fg:var(--green-400);
    --brand-fg-hover:var(--green-300);
    --brand-bg:var(--green-600);
    --brand-bg-hover:var(--green-500);
    --brand-bg-active:var(--green-400);
    --brand-bg-subtle:rgba(16,185,129,.12);
    --brand-border:rgba(16,185,129,.30);
    --brand-on:var(--gray-950);

    --accent-fg:var(--blue-400);
    --accent-bg:var(--blue-600);
    --accent-bg-hover:var(--blue-500);
    --accent-bg-subtle:rgba(46,144,250,.12);
    --accent-border:rgba(46,144,250,.30);

    --danger-fg:var(--red-400);
    --danger-bg:var(--red-600);
    --danger-bg-hover:var(--red-500);
    --danger-bg-subtle:rgba(240,68,56,.12);
    --danger-border:rgba(240,68,56,.30);

    --warn-fg:var(--amber-300);
    --warn-bg:var(--amber-500);
    --warn-bg-subtle:rgba(247,144,9,.12);
    --warn-border:rgba(247,144,9,.30);

    --ok-fg:var(--green-400);
    --ok-bg-subtle:rgba(16,185,129,.12);
    --ok-border:rgba(16,185,129,.30);

    --info-fg:var(--blue-400);
    --info-bg-subtle:rgba(46,144,250,.12);
    --info-border:rgba(46,144,250,.30);

    --focus-color:var(--green-400);

    /* Nền tối nuốt bóng đổ — tăng độ đen để còn tách được lớp */
    --shadow-xs:0 1px 2px rgba(0,0,0,.40);
    --shadow-sm:0 1px 3px rgba(0,0,0,.50), 0 1px 2px rgba(0,0,0,.40);
    --shadow-md:0 4px 8px -2px rgba(0,0,0,.55), 0 2px 4px -2px rgba(0,0,0,.40);
    --shadow-lg:0 12px 16px -4px rgba(0,0,0,.55), 0 4px 6px -2px rgba(0,0,0,.35);
    --shadow-xl:0 20px 24px -4px rgba(0,0,0,.60), 0 8px 8px -4px rgba(0,0,0,.35);
    --shadow-up:0 -4px 12px -2px rgba(0,0,0,.50);

    --skeleton-from:#1b2436;
    --skeleton-to:#232e42;
  }
}

/* Người dùng ép theme tối thủ công */
:root[data-theme="dark"] {
  --bg-canvas:var(--gray-950); --bg-surface:#111827; --bg-raised:#161f2e;
  --bg-subtle:#0f1725; --bg-muted:#1b2436; --bg-hover:#1b2436; --bg-active:#222c40;
  --bg-inverse:var(--gray-50);
  --fg-default:var(--gray-100); --fg-strong:var(--gray-0); --fg-muted:var(--gray-400);
  --fg-subtle:#7d8798; --fg-inverse:var(--gray-900); --fg-disabled:var(--gray-600);
  --border-subtle:#1e2739; --border-default:#2a3347; --border-strong:#3b465e;
  --brand-fg:var(--green-400); --brand-fg-hover:var(--green-300);
  --brand-bg:var(--green-600); --brand-bg-hover:var(--green-500); --brand-bg-active:var(--green-400);
  --brand-bg-subtle:rgba(16,185,129,.12); --brand-border:rgba(16,185,129,.30); --brand-on:var(--gray-950);
  --accent-fg:var(--blue-400); --accent-bg:var(--blue-600); --accent-bg-hover:var(--blue-500);
  --accent-bg-subtle:rgba(46,144,250,.12); --accent-border:rgba(46,144,250,.30);
  --danger-fg:var(--red-400); --danger-bg:var(--red-600); --danger-bg-hover:var(--red-500);
  --danger-bg-subtle:rgba(240,68,56,.12); --danger-border:rgba(240,68,56,.30);
  --warn-fg:var(--amber-300); --warn-bg:var(--amber-500);
  --warn-bg-subtle:rgba(247,144,9,.12); --warn-border:rgba(247,144,9,.30);
  --ok-fg:var(--green-400); --ok-bg-subtle:rgba(16,185,129,.12); --ok-border:rgba(16,185,129,.30);
  --info-fg:var(--blue-400); --info-bg-subtle:rgba(46,144,250,.12); --info-border:rgba(46,144,250,.30);
  --focus-color:var(--green-400);
  --shadow-xs:0 1px 2px rgba(0,0,0,.40);
  --shadow-sm:0 1px 3px rgba(0,0,0,.50), 0 1px 2px rgba(0,0,0,.40);
  --shadow-md:0 4px 8px -2px rgba(0,0,0,.55), 0 2px 4px -2px rgba(0,0,0,.40);
  --shadow-lg:0 12px 16px -4px rgba(0,0,0,.55), 0 4px 6px -2px rgba(0,0,0,.35);
  --shadow-xl:0 20px 24px -4px rgba(0,0,0,.60), 0 8px 8px -4px rgba(0,0,0,.35);
  --shadow-up:0 -4px 12px -2px rgba(0,0,0,.50);
  --skeleton-from:#1b2436; --skeleton-to:#232e42;
}

/* ============================================================
   Reset + nền tảng dùng chung
   ============================================================ */
*, *::before, *::after { box-sizing:border-box; }

html {
  -webkit-text-size-adjust:100%;
  color-scheme:light dark;
  scroll-behavior:smooth;
}
:root[data-theme="light"] { color-scheme:light; }
:root[data-theme="dark"]  { color-scheme:dark; }

body {
  margin:0;
  background:var(--bg-canvas);
  color:var(--fg-default);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,h4,h5,h6 {
  margin:0; font-weight:var(--fw-semibold);
  letter-spacing:var(--tracking-tight); color:var(--fg-strong);
}
p { margin:0; }
img, svg, video { max-width:100%; height:auto; vertical-align:middle; }

/* --- Focus: một luật duy nhất cho toàn hệ.
       Trước bản này, :focus chỉ tồn tại ở skip-link — tức là toàn bộ form,
       nút và link không có chỉ báo bàn phím (lỗi WCAG 2.4.7). --- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline:2px solid transparent;
  outline-offset:2px;
  box-shadow:0 0 0 2px var(--bg-canvas), 0 0 0 4px var(--focus-color);
  border-radius:var(--r-sm);
}
/* Chuột không kéo theo ring; bàn phím thì luôn có */
:where(a, button, summary):focus:not(:focus-visible) { outline:none; }

::selection { background:var(--brand-bg-subtle); color:var(--brand-fg); }

/* Tôn trọng thiết lập giảm chuyển động của hệ điều hành */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* --- Tiện ích dùng chung --- */
.muted   { color:var(--fg-muted); }
.subtle  { color:var(--fg-subtle); }
.mono    { font-family:var(--font-mono); font-size:.925em; font-variant-numeric:tabular-nums; }
.prewrap { white-space:pre-wrap; overflow-wrap:anywhere; }
.nowrap  { white-space:nowrap; }
.row     { display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.stack   { display:grid; gap:var(--sp-3); }
.ok      { color:var(--ok-fg); }
.danger  { color:var(--danger-fg); }
.warn    { color:var(--warn-fg); }
.visually-hidden {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Skip link — dùng chung cho cả public lẫn ops. Để trong tokens.css chứ không
   trong app.css: ops.css không nạp app.css, nên nếu định nghĩa ở đó thì link
   này nằm chình ình góc trái mọi màn ops. */
.skip-link {
  position:absolute; left:var(--sp-2); top:var(--sp-2);
  z-index:var(--z-toast);
  transform:translateY(-250%);
  background:var(--brand-bg, var(--green-700)); color:var(--brand-on, #fff);
  padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r-md);
  font-weight:var(--fw-medium); text-decoration:none;
  /* Không có nó thì shrink-to-fit bó link còn ~70px và chữ vỡ thành 4 dòng */
  white-space:nowrap;
  box-shadow:var(--shadow-lg);
  transition:transform var(--dur) var(--ease-out);
}
.skip-link:focus { transform:translateY(0); }

/* Sprite icon nằm đầu <body>: kéo ra khỏi luồng, không chiếm chỗ, không đọc màn */
.icon-sprite { position:absolute; width:0; height:0; overflow:hidden; }

/* Icon inline: ăn theo cỡ chữ và màu chữ của phần tử cha */
.icon {
  width:1em; height:1em; flex:none; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.icon--lg { width:1.25em; height:1.25em; }

/* Skeleton dùng chung — có nhịp thở, tự tắt khi người dùng yêu cầu giảm chuyển động */
.skeleton { display:grid; gap:var(--sp-2); }
.skeleton__row {
  height:14px; border-radius:var(--r-sm);
  background:linear-gradient(90deg,var(--skeleton-from) 25%,var(--skeleton-to) 37%,var(--skeleton-from) 63%);
  background-size:400% 100%;
  animation:skeleton-sweep 1.4s ease-in-out infinite;
}
.skeleton__row:nth-child(2) { width:88%; }
.skeleton__row:nth-child(3) { width:64%; }
@keyframes skeleton-sweep { from { background-position:100% 50%; } to { background-position:0 50%; } }

.htmx-indicator { display:none; }
.htmx-request .htmx-indicator { display:block; }
.htmx-request.htmx-indicator { display:block; }