/* ==========================================================================
   Kapit design tokens + self-hosted fonts  ·  v2.0
   Shared foundation for the osTicket rebrand override layer.
   Load this FIRST, before kapit-client.css / kapit-scp.css / kapit-login.css.
   Source of truth: kapit_assets/design_system/kapit-design-system-v2.html (§18)
   Do not invent hexes — values here are canonical.
   ========================================================================== */

/* ------------------------------------------------------------------ Fonts --
   All three are variable fonts (one file covers the full weight range we use),
   split into latin + latin-ext subsets. latin-ext also carries ₱ (U+20B1).
   Self-hosted, same-origin — unaffected by the client CSP. font-display: swap
   keeps text visible while fonts load (system-ui fallbacks below).
*/

/* Plus Jakarta Sans — display / headings / numbers / wordmark (200–800) */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/PlusJakartaSans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/PlusJakartaSans-latinext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter — body / UI (100–900) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Inter-latinext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* JetBrains Mono — detail voice: IDs, timestamps, SLA counters (100–800) */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/JetBrainsMono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/JetBrainsMono-latinext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ----------------------------------------------------------------- Tokens -- */
:root {
  /* brand — teal ramp (canonical --kapit-teal-*) */
  --kapit-teal-50:#E9F8F1;  --kapit-teal-100:#CDEFE0; --kapit-teal-200:#9FE1C6;
  --kapit-teal-300:#6BCEA8; --kapit-teal-400:#3AB98B; --kapit-teal-500:#1D9E75;
  --kapit-teal-600:#16855F; --kapit-teal-700:#0F6E56; --kapit-teal-800:#0A5443;
  --kapit-teal-900:#04342C; /* Deep palm — dark stage, used sparingly in-app */

  /* coral — money/urgency ONLY (one per view; never errors) */
  --coral-50:#FDEFE8;  --coral-100:#F8D3C2;
  --coral-500:#D85A30; --coral-600:#B4451F; --coral-700:#8F3517;

  /* sand — warm neutrals */
  --sand-0:#FDFCF9; --sand-1:#FAF7F0; --sand-2:#F1ECE1; --sand-3:#E4DDCD;

  /* ink — text */
  --ink:#12312B; --ink-soft:#3E534C; --ink-muted:#6B7C74;

  /* semantic */
  --warning:#DE9A2B; --warning-bg:#FBF1DC; --warning-tx:#7A5108;
  --danger:#CF4436;  --danger-bg:#FBEAE7;  --danger-tx:#8F2419;
  --info:#33739F;    --info-bg:#E8F1F7;    --info-tx:#1E4B6B;

  /* type */
  --font-display:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  /* shape */
  --radius-1:10px; --radius-2:16px; --radius-3:26px; --radius-pill:999px;

  /* elevation */
  --shadow-1:0 1px 2px rgba(18,49,43,.05), 0 8px 24px rgba(18,49,43,.07);
  --shadow-2:0 2px 6px rgba(18,49,43,.07), 0 20px 48px rgba(18,49,43,.13);
  --shadow-3:0 8px 20px rgba(4,52,44,.16), 0 32px 72px rgba(4,52,44,.24);

  /* motion */
  --dur-1:150ms; --dur-2:180ms; --dur-3:600ms;

  /* --- short aliases (design system allows --tN / --sN / --cN 1:1) --- */
  --t50:var(--kapit-teal-50);   --t100:var(--kapit-teal-100); --t200:var(--kapit-teal-200);
  --t300:var(--kapit-teal-300); --t400:var(--kapit-teal-400); --t500:var(--kapit-teal-500);
  --t600:var(--kapit-teal-600); --t700:var(--kapit-teal-700); --t800:var(--kapit-teal-800);
  --t900:var(--kapit-teal-900);
  --c500:var(--coral-500); --c600:var(--coral-600);
  --s0:var(--sand-0); --s1:var(--sand-1); --s2:var(--sand-2); --s3:var(--sand-3);

  /* --- semantic surfaces (dark-ready: a future [data-theme=dark] re-points
         only these ~10 vars; no shell rule references a raw hex) --- */
  --bg:             var(--sand-1);   /* app canvas */
  --surface:        #fff;            /* cards, panels, app-bar */
  --surface-2:      var(--sand-0);   /* subtle raised / table head */
  --surface-sunken: var(--sand-1);   /* inset wells, search field */
  --border:         var(--sand-3);
  --border-soft:    var(--sand-2);
  --text:           var(--ink);
  --text-soft:      var(--ink-soft);
  --text-muted:     var(--ink-muted);

  /* sidebar / app-bar (light rail — Deep-palm stays reserved) */
  --sidebar-bg:            var(--sand-0);
  --sidebar-item:          var(--ink-soft);
  --sidebar-item-active-bg:var(--kapit-teal-50);
  --sidebar-item-active:   var(--kapit-teal-800);
  --sidebar-hover-bg:      var(--sand-2);
  --appbar-bg:             #fff;

  /* --- layout geometry --- */
  --sidebar-w:           248px;
  --sidebar-w-collapsed: 68px;
  --appbar-h:            60px;
  --content-pad:         28px;
  --content-max:         1480px;

  /* --- spacing scale --- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-7:32px; --space-8:48px;

  /* --- z-index scale --- */
  --z-sidebar:40; --z-appbar:50; --z-drawer-scrim:45; --z-dialog:1000;

  /* --- SVG icon set (Lucide-style, applied via mask-image; tinted by
         the element's color via currentColor on background) --- */
  --ic-dashboard:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='7' height='9' x='3' y='3' rx='1'/><rect width='7' height='5' x='14' y='3' rx='1'/><rect width='7' height='9' x='14' y='12' rx='1'/><rect width='7' height='5' x='3' y='16' rx='1'/></svg>");
  --ic-tickets:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 9a3 3 0 1 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 1 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z'/><path d='M13 5v14'/></svg>");
  --ic-users:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>");
  --ic-tasks:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m3 17 2 2 4-4'/><path d='m3 7 2 2 4-4'/><path d='M13 6h8'/><path d='M13 12h8'/><path d='M13 18h8'/></svg>");
  --ic-kb:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 7v14'/><path d='M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z'/></svg>");
  --ic-search:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>");
  --ic-settings:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/><circle cx='12' cy='12' r='3'/></svg>");
  --ic-user:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>");
  --ic-chevron:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  --ic-menu:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12h16'/><path d='M4 6h16'/><path d='M4 18h16'/></svg>");
  --ic-bell:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/><path d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/></svg>");
  --ic-home:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/><path d='M9 22V12h6v10'/></svg>");
  --ic-plus:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/><path d='M12 5v14'/></svg>");
  --ic-mail:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='20' height='16' x='2' y='4' rx='2'/><path d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/></svg>");
}