/*
 * MAKIPS — Design Tokens (White-Label Ready)
 * --------------------------------------------------------------------------
 * Semua warna, radius, spacing, dan tipografi didefinisikan sebagai CSS
 * variables. Reseller / tenant white-label cukup menimpa variabel ini
 * (mis. lewat <style> per-tenant atau atribut data-theme) TANPA mengubah CSS
 * komponen. Mendukung mode terang/gelap dan kontras tinggi (accessibility).
 */

:root {
  /* Brand (default MAKIPS) — bisa ditimpa per tenant untuk white-label */
  --brand-50: #eef5ff;
  --brand-100: #d9e8ff;
  --brand-200: #b8d4ff;
  --brand-300: #8bb8ff;
  --brand-400: #5a93fb;
  --brand-500: #356ff0;
  --brand-600: #2152d6;
  --brand-700: #1c41ad;
  --brand-800: #1d3a89;
  --brand-900: #1d356d;

  --accent-500: #14b8a6;
  --accent-600: #0d9488;
  --violet-500: #7c5cff;
  --violet-600: #6d4bf0;

  /* Status */
  --success: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;
  --info: #2563eb;

  /* Neutrals (light theme) */
  --bg: #eef2f9;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-2: #f1f5fb;
  --surface-glass: rgba(255, 255, 255, 0.72);
  --border: #e6ebf3;
  --border-strong: #cdd6e4;
  --text: #0e1726;
  --text-muted: #56627a;
  --text-subtle: #93a0b5;
  --text-on-brand: #ffffff;

  /* Gradients (elegan, hemat — dipakai pada hero, tombol utama, ikon) */
  --grad-brand: linear-gradient(135deg, #4c7dff 0%, #2152d6 55%, #6d4bf0 120%);
  --grad-brand-soft: linear-gradient(135deg, #eef5ff 0%, #f3eeff 100%);
  --grad-sheen: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0));
  --ring: 0 0 0 3px var(--brand-100);

  /* Typography */
  --font-sans: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, monospace;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;

  /* Radius & spacing */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;

  /* Elevation — lebih dalam & lembut (kesan 3D premium) */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.04);
  --shadow: 0 6px 20px -6px rgba(16, 24, 40, 0.14), 0 2px 6px rgba(16, 24, 40, 0.06);
  --shadow-lg: 0 24px 50px -12px rgba(16, 24, 40, 0.28), 0 8px 18px rgba(16, 24, 40, 0.10);
  --shadow-brand: 0 10px 28px -8px rgba(33, 82, 214, 0.5);

  /* Layout */
  --sidebar-w: 264px;
  --topbar-h: 60px;
  --container-max: 1280px;

  /* Motion (dihormati oleh prefers-reduced-motion) */
  --transition: 180ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 110ms ease;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Dark theme — lebih kaya & dalam (premium) */
:root[data-theme="dark"] {
  --bg: #070b16;
  --bg-elevated: #111a2e;
  --surface: #121d33;
  --surface-2: #1a2742;
  --surface-glass: rgba(18, 29, 51, 0.66);
  --border: #243152;
  --border-strong: #34456a;
  --text: #eaf1fb;
  --text-muted: #a3b2cc;
  --text-subtle: #6e7f9e;
  --grad-brand: linear-gradient(135deg, #5a8bff 0%, #2f5fe6 55%, #7c5cff 120%);
  --grad-brand-soft: linear-gradient(135deg, rgba(53,111,240,.18) 0%, rgba(124,92,255,.18) 100%);
  --ring: 0 0 0 3px rgba(53,111,240,.35);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0,0,0,.4);
  --shadow-lg: 0 28px 60px -16px rgba(0, 0, 0, 0.75);
  --shadow-brand: 0 10px 30px -8px rgba(53, 111, 240, 0.55);
}

/* High contrast (accessibility) */
:root[data-contrast="high"] {
  --border: #000000;
  --border-strong: #000000;
  --text-muted: #1f2937;
  --brand-600: #0033cc;
}

/* Reduced motion (accessibility) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition: 0ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
:root[data-motion="reduced"] {
  --transition: 0ms;
}