/* ============================================================
   OrderBos · design tokens — arah "Soft Blue Fintech" (Velora)
   Sumber tunggal warna/bentuk untuk panel admin & login
   ============================================================ */
:root {
  /* --- permukaan --- */
  --bg: #eef4fd;
  --canvas: #eef4fd;
  --surface: #ffffff;
  --surface-2: #f6f9fe;
  --surface-3: #edf2fb;
  --line: #e4ebf7;
  --line-soft: #f0f5fc;
  --line-strong: #d2dff1;

  /* --- teks --- */
  --ink: #0b1526;
  --ink-2: #33415c;
  --muted: #7a8aa6;

  /* --- aksen --- */
  --accent: #2f6bf6;
  --accent-deep: #1d4ed8;
  --accent-light: #6fb1ff;
  --accent-ink: #ffffff;
  --accent-soft: #e8f0ff;
  --accent-soft-2: #dbe9ff;
  --grad: linear-gradient(135deg, #6fb1ff 0%, #2f6bf6 55%, #1d4ed8 100%);
  --grad-soft: linear-gradient(135deg, rgba(111,177,255,.16) 0%, rgba(47,107,246,.12) 100%);

  /* --- semantik --- */
  --ok: #16a34a;
  --ok-soft: #e7f8ee;
  --warn: #d97706;
  --warn-soft: #fff4e0;
  --danger: #ef4444;
  --danger-soft: #fdecec;
  --info: #2f6bf6;
  --info-soft: #e8f0ff;
  --violet: #8b5cf6;
  --violet-soft: #f1ebff;
  --cyan: #06b6d4;
  --cyan-soft: #e2f8fc;

  /* --- tipografi --- */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-10: 10px;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-32: 32px;

  --ls-tight: -0.032em;
  --ls-label: 0.08em;

  /* --- bentuk --- */
  --r-xs: 8px;
  --r-sm: 10px;
  --r: 14px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* --- elevasi --- */
  --sh-xs: 0 1px 2px rgba(16, 40, 90, .05);
  --sh-sm: 0 6px 18px rgba(23, 54, 120, .07);
  --sh-md: 0 14px 36px rgba(23, 54, 120, .09);
  --sh-lg: 0 30px 80px rgba(13, 32, 74, .22);
  --ring: 0 0 0 3px rgba(47, 107, 246, .18);

  /* --- ritme --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --nav-h: 64px;
  --dur: .16s;
}

/* mode gelap: navy dalam, aksen biru muda */
[data-theme="dark"] {
  --bg: #070c18;
  --canvas: #070c18;
  --surface: #0e1526;
  --surface-2: #131c30;
  --surface-3: #182339;
  --line: #1e2b45;
  --line-soft: #172034;
  --line-strong: #2a3a58;
  --ink: #eef3fc;
  --ink-2: #b6c2d8;
  --muted: #7f8dab;
  --accent: #5b8dff;
  --accent-deep: #3f74f0;
  --accent-soft: #16243f;
  --accent-soft-2: #1b2c4c;
  --ok-soft: #10261c;
  --warn-soft: #2a1f0d;
  --danger-soft: #2a1416;
  --violet-soft: #221941;
  --cyan-soft: #0b2830;
  --grad-soft: linear-gradient(135deg, rgba(91,141,255,.16) 0%, rgba(47,107,246,.10) 100%);
}