/*
 * ============================================
 * UbahPulsa Design Tokens (CSS Custom Properties)
 * Extracted from TailwindCSS theme → standalone
 * ============================================
 */

:root {
  /* ===== Primary Gold/Yellow Palette ===== */
  --color-primary-50: #fffbeb;
  --color-primary-100: #fef9c3;
  --color-primary-200: #fef08a;
  --color-primary-300: #fde047;
  --color-primary-400: #facc15;
  --color-primary-500: #f5b400;
  --color-primary-600: #eab308;
  --color-primary-700: #d97706;
  --color-primary-800: #b45309;
  --color-primary-900: #78350f;
  --color-primary-950: #451a03;

  /* ===== Success Green ===== */
  --color-success-50: #f0fdf4;
  --color-success-100: #dcfce7;
  --color-success-500: #22c55e;
  --color-success-600: #16a34a;
  --color-success-700: #15803d;

  /* ===== Warning Yellow ===== */
  --color-warning-50: #fffbeb;
  --color-warning-100: #fef9c3;
  --color-warning-500: #eab308;
  --color-warning-600: #d97706;

  /* ===== Danger Red ===== */
  --color-danger-50: #fef2f2;
  --color-danger-100: #fee2e2;
  --color-danger-500: #ef4444;
  --color-danger-600: #dc2626;

  /* ===== Neutral / Gray ===== */
  --color-gray-50: #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e3ecf8;
  --color-gray-300: #cbd5e1;
  --color-gray-400: #94a3b8;
  --color-gray-500: #64748b;
  --color-gray-600: #475569;
  --color-gray-700: #334155;
  --color-gray-800: #1e293b;
  --color-gray-900: #0f172a;

  /* ===== Surface Colors ===== */
  --color-surface: #f4f6fa;
  --color-surface-alt: #eef2f9;

  /* ===== Font Family ===== */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ===== Border Radius ===== */
  --radius-xs: 0.5rem;    /* 8px  */
  --radius-sm: 0.75rem;   /* 12px */
  --radius-md: 1rem;      /* 16px */
  --radius-lg: 1.5rem;    /* 24px */
  --radius-xl: 1.75rem;   /* 28px */
  --radius-2xl: 2rem;     /* 32px */

  /* ===== Shadows ===== */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.1);

  /* ===== Transitions ===== */
  --transition-fast: all 0.15s ease;
  --transition-normal: all 0.25s ease;
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}