/* ═══════════════════════════════════════════════════════
   FONEPAY BRAND TOKENS
   Source: Fonepay Brand & Identity Guidelines 2024 v3.0
   ═══════════════════════════════════════════════════════ */
:root {
  /* Brand Core */
  --fp-black: #0a0d12;
  --fp-white: #ffffff;
  --fp-red: #ce2027;
  --fp-red-hover: #e52830;
  --fp-red-dim: rgba(206, 32, 39, 0.12);
  --fp-red-glow: rgba(206, 32, 39, 0.30);

  /* Surface Hierarchy (derived from fp-black) */
  --bg-deep: #0a0d12;
  --bg-primary: #0f1318;
  --bg-secondary: #151a22;
  --bg-card: #1a1f2a;
  --bg-card-hover: #1f2535;
  --bg-input: #0c0f15;
  --bg-elevated: #222834;

  /* Borders */
  --border: #252a35;
  --border-light: #303640;
  --border-focus: var(--fp-red);

  /* Text */
  --text-primary: #f0f2f5;
  --text-secondary: #8a95a8;
  --text-muted: #4e5a6e;

  /* Semantic */
  --success: #00c853;
  --success-dim: rgba(0, 200, 83, 0.12);
  --warning: #ff9800;
  --warning-dim: rgba(255, 152, 0, 0.12);
  --danger: #ef5350;
  --danger-dim: rgba(239, 83, 80, 0.12);
  --info: #42a5f5;
  --info-dim: rgba(66, 165, 245, 0.12);
  --gold: #ffc107;
  --gold-dim: rgba(255, 193, 7, 0.12);

  /* Typography */
  --font-primary: 'Poppins', 'Century Gothic', sans-serif;
  --font-heading: 'Century Gothic', 'Poppins', sans-serif;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;

  /* Shadows */
  --shadow-card: 0 2px 12px rgba(0,0,0,0.3);
  --shadow-elevated: 0 8px 32px rgba(0,0,0,0.4);
  --shadow-modal: 0 24px 64px rgba(0,0,0,0.6);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;

  /* Layout */
  --sidebar-width: 250px;
  --classification-height: 30px;
}