/* =============================================================================
   Enterprise Directory — Design Tokens (developer-ready CSS variables)
   Semantic tokens flip by theme; primitives are fixed. WCAG 2.2 AA in both themes.
   ============================================================================= */

:root {
  /* ---- primitives (do not use directly in components; reference semantics) ---- */
  --blue-600:#155EEF; --blue-700:#004EEB; --blue-50:#EFF4FF; --blue-300:#528BFF;
  --green-500:#039855; --amber-500:#DC6803; --red-500:#D92D20; --wa:#25D366;
  --gray-900:#101828; --gray-500:#667085; --gray-200:#E4E7EC;
  --white:#FFFFFF; --canvas:#F8FAFC;

  /* ---- typography ---- */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-title:22px; --fw-title:500;
  --fs-name:15px;  --fw-name:500;
  --fs-sec:13px;   --fw-sec:400;
  --fs-body:14px;  --fs-xs:12px; --fs-chip:13px;
  --lh:1.4;

  /* ---- spacing (8-pt) + radius ---- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
  --margin:16px; --row-gap:12px;
  --radius:10px; --radius-sm:8px; --radius-pill:999px;
  --row-h:60px; --avatar:40px; --tap:44px;

  /* ---- elevation (subtle only) ---- */
  --shadow-sheet:0 -8px 24px rgba(16,24,40,.12);
  --shadow-pop:0 8px 24px rgba(16,24,40,.14);
  --ring:0 0 0 3px color-mix(in srgb, var(--primary) 40%, transparent);

  /* ---- SEMANTIC — light theme (default) ---- */
  --primary:#155EEF;
  --primary-pressed:#004EEB;
  --primary-selected-bg:#EFF4FF;
  --on-primary:#FFFFFF;

  --text:#101828;
  --text-secondary:#667085;
  --bg:#F8FAFC;
  --surface:#FFFFFF;
  --surface-2:#F2F4F7;      /* avatar / skeleton base */
  --border:#E4E7EC;

  --available:#039855;
  --busy:#DC6803;
  --unavailable:#D92D20;
  --available-bg:#ECFDF3;
  --busy-bg:#FFFAEB;
  --unavailable-bg:#FEF3F2;
  --wa-color:#25D366;

  --skeleton-1:#EDF0F4;
  --skeleton-2:#E3E7EE;
}

/* ---- SEMANTIC — dark theme ---- */
:root[data-theme="dark"] {
  --primary:#528BFF;
  --primary-pressed:#528BFF;
  --primary-selected-bg:#102A56;
  --on-primary:#0C111D;

  --text:#F5F7FA;
  --text-secondary:#98A2B3;
  --bg:#0C111D;
  --surface:#161B26;
  --surface-2:#1F242F;
  --border:#344054;

  --available:#32D583;
  --busy:#FDB022;
  --unavailable:#F97066;
  --available-bg:#0B2E22;
  --busy-bg:#2E2410;
  --unavailable-bg:#31150F;
  --wa-color:#25D366;

  --skeleton-1:#1B212D;
  --skeleton-2:#232A38;

  --shadow-sheet:0 -8px 24px rgba(0,0,0,.5);
  --shadow-pop:0 8px 24px rgba(0,0,0,.55);
}

/* follow system when no explicit theme is set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --primary:#528BFF; --primary-pressed:#528BFF; --primary-selected-bg:#102A56; --on-primary:#0C111D;
    --text:#F5F7FA; --text-secondary:#98A2B3; --bg:#0C111D; --surface:#161B26; --surface-2:#1F242F; --border:#344054;
    --available:#32D583; --busy:#FDB022; --unavailable:#F97066;
    --available-bg:#0B2E22; --busy-bg:#2E2410; --unavailable-bg:#31150F;
    --skeleton-1:#1B212D; --skeleton-2:#232A38;
    --shadow-sheet:0 -8px 24px rgba(0,0,0,.5); --shadow-pop:0 8px 24px rgba(0,0,0,.55);
  }
}