/**
 * tokens.css — Design tokens dari BRAND_CONFIG (insan-kelana-v8.html lines 10-26)
 * Sinkronkan dengan config/brand.php colorPrimary/colorPrimaryDark/colorAccent.
 */

:root {
  /* Brand colors */
  --primary:        #0e8a7a;
  --primary-dark:   #0a3d52;
  --primary-light:  #5eead4;
  --secondary:      #eab308;
  --accent:         #f59e0b;

  /* Text */
  --t1: #0f172a;
  --t2: #475569;
  --t3: #94a3b8;

  /* Gray scale */
  --g1: #f1f5f9;
  --g2: #e2e8f0;
  --g3: #cbd5e1;

  /* Backgrounds */
  --bg:   #f8fafc;
  --card: #ffffff;

  /* Status colors */
  --ok:     #16a34a;
  --ok-bg:  #dcfce7;
  --warn:   #ea580c;
  --warn-bg:#ffedd5;
  --err:    #dc2626;
  --err-bg: #fee2e2;
  --info:   #2563eb;
  --info-bg:#dbeafe;

  /* Radius */
  --r:  10px;
  --r2: 14px;
  --r3: 18px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow:    0 2px 8px rgba(15, 23, 42, .08);
  --shadow-lg: 0 8px 24px rgba(15, 23, 42, .12);

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* App shell (mobile-first) */
  --app-max-width: 420px;

  /* Typography */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
}