/* =========================================
   BASE.css - Variables, Reset, Typography
   ========================================= */

/* Color Tokens */
:root {
  --primary: #E65100;
  --primary-light: #FF8F00;
  --primary-dark: #BF360C;

  --green: #2E7D32;
  --green-light: #4CAF50;
  --green-bg: #E8F5E9;

  --red: #C62828;
  --red-light: #EF5350;
  --red-bg: #FFEBEE;

  --blue: #1565C0;
  --blue-bg: #E3F2FD;

  --orange-bg: #FFF3E0;

  --bg: #FFFAF5;
  --card: #FFFFFF;
  --text: #1A1A1A;
  --text2: #555;
  --text3: #888;

  --border: #E0E0E0;
  --shadow: 0 2px 8px rgba(0,0,0,.1);

  --radius: 16px;
  --radius-sm: 12px;

  --nav-h: 72px;
  --header-h: 60px;
}

/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Typography */
html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  overscroll-behavior: none;
}

body { display: flex; flex-direction: column; }

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: #ccc; border-radius: 2px; }

/* Number input no spinners */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* Media query base */
@media (max-width: 414px) {
  .cat-tab { padding: 6px 10px; font-size: 12px; border-radius: 16px; }
  .trx-item { gap: 8px; padding: 10px 0; }
  .trx-icon { width: 36px; height: 36px; font-size: 18px; }
  .trx-info .trx-title { font-size: 13px; }
  .trx-info .trx-sub { font-size: 11px; }
  .trx-amount { font-size: 14px; }
  .trx-actions { gap: 4px; }
  .prof-banner-card { padding: 28px 16px 18px; }
  .prof-emoji { font-size: 48px; }
  .prof-banner-title { font-size: 18px; }
  .prof-banner-sub { font-size: 12.5px; }
}