/* ============================================================
   STIE PELITA BUANA — LMS GLOBAL THEME
   Module: TOKENS.CSS
   ============================================================ */

/* ============================================================
   STIE PELITA BUANA — LMS GLOBAL THEME
   Modern Flat Premium Design System
   Version 7.0 — Final Clean (No rn- prefix, Zero Important Rules, No unused)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&display=swap');

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  /* Colors — Indigo */
  --indigo: #4f46e5; --indigo-2: #6366f1; --indigo-3: #818cf8; --indigo-deep: #312e81;
  --indigo-bg: #eef2ff; --indigo-bg2: #e0e7ff;
  /* Colors — Emerald */
  --emerald: #059669; --emerald-2: #10b981; --emerald-bg: #d1fae5; --emerald-bg2: #ecfdf5;
  /* Colors — Amber */
  --amber: #d97706; --amber-2: #f59e0b; --amber-bg: #fef3c7; --amber-bg2: #fffbeb;
  /* Colors — Rose */
  --rose: #e11d48; --rose-2: #f43f5e; --rose-bg: #ffe4e6; --rose-bg2: #fff1f2;
  /* Colors — Sky */
  --sky: #0284c7; --sky-2: #0ea5e9; --sky-bg: #e0f2fe; --sky-bg2: #f0f9ff;
  /* Colors — Slate */
  --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-300: #cbd5e1;
  --slate-400: #94a3b8; --slate-500: #64748b; --slate-600: #475569; --slate-700: #334155;
  --slate-800: #1e293b; --slate-900: #0f172a;
  /* Theme Tokens */
  --accent: #4f46e5;
  --accent-hover: #4338ca;
  --accent-bg: #eef2ff;
  --accent-border: #c7d2fe;
  --surface: #ffffff;
  --surface-alt: #f8fafc;
  --ink: #0f172a;
  --ink-muted: #64748b;
  /* Radius */
  --r-sm: 8px; --r: 14px; --r-lg: 18px; --r-xl: 22px; --r-pill: 999px;
  /* Transition */
  --t: cubic-bezier(0.4, 0, 0.2, 1);
  --transition: cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
  /* Semantic aliases */
  --primary: var(--accent); --primary-hover: var(--accent-hover); --primary-dark: var(--indigo-deep);
  --primary-light: var(--accent-bg); --primary-border: var(--accent-border);
  --secondary: var(--sky); --success: var(--emerald); --success-light: var(--emerald-bg2);
  --success-text: #065f46; --warning: var(--amber); --warning-light: var(--amber-bg2);
  --warning-text: #92400e; --danger: var(--rose); --danger-light: var(--rose-bg2);
  --danger-text: #9f1239; --info: var(--sky); --info-light: var(--sky-bg2);
  --info-text: #0369a1; --dark: var(--ink);
  /* Layout */
  --sidebar-bg: #0b132b; --sidebar-hover: #1c2541; --sidebar-active: var(--accent);
  --sidebar-width: 270px; --topbar-height: 56px;
  --card-bg: var(--surface); --body-bg: var(--surface-alt);
  --text-primary: var(--ink); --text-secondary: var(--slate-700); --text-muted: var(--ink-muted);
  --border: var(--slate-200); --border-light: var(--slate-100);
  /* Shadows */
  --shadow: 0 1px 3px 0 rgba(0,0,0,0.05), 0 1px 2px -1px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.06), 0 4px 6px -4px rgba(0,0,0,0.03);
  /* Typography Scale — Responsive Hierarchies: Desktop (Default) -> Tablet -> Mobile */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Desktop Standard (>= 992px) */
  --font-2xs: 12px;
  --font-xs: 13.5px;
  --font-sm: 14.5px;
  --font-md: 16px;
  --font-lg: 19px;
  --font-xl: 23px;
  --font-xxl: 29px;
  /* Impersonation */
  --impersonate-height: 0px;
}

/* Extra Large Desktop Displays (>= 1400px) */
@media (min-width: 1400px) {
  :root {
    --font-2xs: 12.5px;
    --font-xs: 14px;
    --font-sm: 15px;
    --font-md: 16.5px;
    --font-lg: 20px;
    --font-xl: 25px;
    --font-xxl: 31px;
  }
}

/* Tablet Displays (768px - 991.98px) */
@media (max-width: 991.98px) {
  :root {
    --font-2xs: 11.5px;
    --font-xs: 13px;
    --font-sm: 14px;
    --font-md: 15px;
    --font-lg: 17.5px;
    --font-xl: 21.5px;
    --font-xxl: 27px;
  }
}

/* Mobile Displays (< 768px) */
@media (max-width: 767.98px) {
  :root {
    --font-2xs: 10.5px;
    --font-xs: 12px;
    --font-sm: 13px;
    --font-md: 14px;
    --font-lg: 16px;
    --font-xl: 19.5px;
    --font-xxl: 24px;
  }
}

.has-impersonation { --impersonate-height: 42px; }