/**
 * GoldLedger Design Tokens & CSS Variables
 * مجوهرات السعادة
 */

:root {
  /* Surface & Canvas - Deep Slate */
  --bg-canvas: #0b0f19;
  --bg-surface: #111827;
  --bg-card: #1f2937;
  --bg-card-hover: #263346;
  --bg-card-active: #2e3e56;
  --bg-input: #0f172a;
  --bg-pill: #1e293b;
  --bg-pill-selected: linear-gradient(135deg, #d97706 0%, #f59e0b 50%, #fbbf24 100%);

  /* Warm Gold Accents */
  --gold-50: #fffbeb;
  --gold-100: #fef3c7;
  --gold-200: #fde68a;
  --gold-300: #fcd34d;
  --gold-400: #fbbf24;
  --gold-500: #f59e0b;
  --gold-600: #d97706;
  --gold-700: #b45309;
  --gold-800: #92400e;
  --gold-900: #78350f;

  /* Metallic Gradients */
  --gold-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #92400e 100%);
  --gold-gradient-glow: linear-gradient(135deg, #fde68a 0%, #f59e0b 45%, #b45309 100%);
  --gold-border-gradient: linear-gradient(135deg, rgba(251, 191, 36, 0.4) 0%, rgba(217, 119, 6, 0.15) 100%);

  /* Semantic Colors */
  --color-inflow: #10b981;      /* Emerald Green for Cash In / Sales */
  --color-inflow-bg: rgba(16, 185, 129, 0.12);
  --color-outflow: #ef4444;     /* Crimson Red for Cash Out / Purchases / Expenses */
  --color-outflow-bg: rgba(239, 68, 68, 0.12);
  --color-warning: #f59e0b;     /* Amber */
  --color-warning-bg: rgba(245, 158, 11, 0.12);
  --color-info: #3b82f6;        /* Sapphire */
  --color-info-bg: rgba(59, 130, 246, 0.12);

  /* Typography Colors */
  --text-primary: #f9fafb;
  --text-secondary: #9ca3af;
  --text-muted: #6b7280;
  --text-gold: #fbbf24;
  --text-on-gold: #111827;

  /* Borders & Dividers */
  --border-muted: #374151;
  --border-subtle: #2d3748;
  --border-gold: rgba(245, 158, 11, 0.35);

  /* Fonts */
  --font-arabic: 'Cairo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-digits: 'Outfit', 'Cairo', sans-serif;

  /* Touch Target & Ergonomics */
  --touch-target-min: 48px;
  --pill-height: 48px;
  --btn-height: 52px;
  --input-height: 52px;
  --nav-height: 64px;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --shadow-gold: 0 4px 16px -2px rgba(245, 158, 11, 0.3);
  --shadow-gold-lg: 0 8px 24px -4px rgba(245, 158, 11, 0.45);

  /* Safe Area Insets for Mobile */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}