/* ══════════════════════════════════════════
   CriolloApp — Design Tokens
   Dark theme, amber accent, mobile-first
   ══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
  /* Backgrounds */
  --bg: #0f1116;
  --bg2: #181b22;
  --bg3: #1e222b;
  --card: #1c2029;
  --border: #2a2f3a;
  --surface-hover: rgba(255, 255, 255, 0.05);

  /* Text */
  --text: #e8e6e3;
  --text-muted: #8a8f9a;
  --text-dim: #55586a;

  /* Accent (Amber) */
  --amber: #C9A84C;
  --amber-hover: #d4b65a;
  --amber-dim: rgba(201, 168, 76, 0.15);
  --amber-mid: rgba(201, 168, 76, 0.3);
  --amber-text: #0f1116;

  /* Status */
  --red: #e74c3c;
  --red-dim: rgba(231, 76, 60, 0.12);
  --yellow: #f39c12;
  --yellow-dim: rgba(243, 156, 18, 0.12);
  --green: #27ae60;
  --green-dim: rgba(39, 174, 96, 0.12);
  --blue: #3498db;
  --blue-dim: rgba(52, 152, 219, 0.12);

  /* Sex */
  --female: #ea7fa3;
  --female-dim: rgba(234, 127, 163, 0.15);
  --male: #60a8e8;
  --male-dim: rgba(96, 168, 232, 0.15);

  /* Layout */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --topbar-h: 56px;
  --nav-h: 60px;
  --content-max: 430px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Typography */
  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 0.2s;

  /* Z-index */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;
}