/* ==========================================================================
   EQUIP LAB X NILECON — CMS Design Tokens
   Source: Figma "design system" #329:1608 + flow extraction, 2026-07-27
   Docs:   ../../vault/10-design-system/tokens.md
   Brand tokens inherited verbatim from mobile. Density re-derived for desktop.
   ========================================================================== */

:root {
  /* --- Gray ramp (= Tailwind Slate) -------------------------------------- */
  --gray-50:#F8FAFC; --gray-100:#F1F5F9; --gray-200:#E2E8F0; --gray-300:#CBD5E1;
  --gray-400:#94A3B8; --gray-500:#64748B; --gray-600:#475569; --gray-700:#334155;
  --gray-800:#1E293B; --gray-900:#0F172A; --gray-950:#020617;

  /* --- CI palette (duplicate source names disambiguated) ------------------ */
  --ci-pink:#EC0261;   --ci-orange:#F05843; --ci-yellow:#FBB053;
  --ci-lime:#3BD060;   --ci-blue:#009FCE;   --ci-teal:#0AAAAC;
  --ci-green:#148A1C;  --ci-indigo:#325EA4; --ci-purple:#644D98;
  --ci-plum:#732286;   --ci-magenta:#CA3A8A;

  --brand-gradient: linear-gradient(90deg,
    #FD9A4C 0%, #D5509E 25%, #7655AB 50%, #3C69B6 75%, #3AAED0 100%);
  --tier-gold: linear-gradient(226deg, #B89658 0%, #E3C889 32%, #AF873F 66%);

  /* --- Semantic ---------------------------------------------------------- */
  --color-text:#1C1C1E;
  --color-text-muted:#64748B;
  --color-placeholder:#C7CEE7;
  --color-surface:#FFFFFF;
  --color-bg:#F6F7FB;
  --color-bg-page:#FAFAFA;
  --color-border:var(--gray-200);
  --color-border-strong:var(--gray-300);

  /* Booking status — from mobile `status-badge` component set */
  --status-upcoming:var(--ci-blue);
  --status-done:var(--ci-lime);
  --status-cancel:var(--ci-pink);
  /* Slot states — from the schedule calendar legend */
  --slot-available:var(--ci-lime);
  --slot-partial:var(--ci-yellow);
  --slot-full:var(--ci-blue);
  --slot-closed:var(--gray-400);

  /* PROPOSED — CI "red" is magenta and does not read as danger. Needs sign-off. */
  --color-danger:#DC2626;
  --color-danger-bg:#FEF2F2;
  --color-warning:var(--ci-yellow);
  --color-success:var(--ci-green);

  /* --- Type -------------------------------------------------------------- */
  --font-sans:"LINE Seed TH","LINE Seed Sans TH","Noto Sans Thai","Sarabun",
              -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-num:"LINE Seed TH",ui-monospace,"SF Mono",Menlo,monospace;

  --text-display:32px; --text-h1:28px; --text-h2:24px; --text-h3:20px;
  --text-title:18px;   --text-body-l:16px; --text-body-m:14px;
  --text-caption:12px; --text-overline:10px; --text-cell:13px;

  /* Thai needs +0.1 over a Latin norm to clear tone marks */
  --lh-tight:1.35; --lh-normal:1.6; --lh-loose:1.75;
  --weight-regular:400; --weight-bold:700;

  /* --- Spacing (4pt, shared with mobile) --------------------------------- */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-7:32px; --space-8:40px; --space-9:48px;

  /* --- Desktop shell (CMS-only) ------------------------------------------ */
  --sidebar-w:248px; --header-h:64px; --content-max:1280px;
  --row-h:52px; --row-h-compact:40px;

  --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-xl:20px;
  --radius-pill:100px;

  --shadow-xs:0 1px 2px rgba(16,24,40,.04);
  --shadow-sm:0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
  --shadow-md:0 4px 20px rgba(0,0,0,.03), 0 1px 3px rgba(16,24,40,.05);
  --shadow-lg:0 12px 32px rgba(20,30,60,.10);
  --shadow-card:0 2px 14px rgba(0,0,0,.06);

  --ring:0 0 0 3px rgba(0,159,206,.25);
}