/* ====================================================================
   Tansik Web Application — Color Tokens & Theme Variables
   ==================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;900&display=swap');

:root {
  --bg-primary: #0A1628;
  --bg-secondary: #0F172A;
  --bg-card: rgba(20, 30, 48, 0.85);
  --bg-card-hover: rgba(30, 45, 70, 0.9);
  --bg-glass: rgba(10, 20, 40, 0.7);

  --text-main: #F0F6FF;
  --text-muted: #8BA3C7;
  --text-light: #B8CDE8;

  --accent-cyan: #00D9FF;
  --accent-blue: #3B82F6;
  --accent-purple: #8B5CF6;
  --accent-emerald: #10B981;
  --accent-amber: #F59E0B;
  --accent-rose: #F43F5E;

  --border-color: rgba(0, 150, 255, 0.12);
  --border-glow: rgba(0, 217, 255, 0.4);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0,150,255,0.08);
  --shadow-glow: 0 0 30px rgba(0, 217, 255, 0.15);

  --font-family: 'Cairo', 'Segoe UI', system-ui, sans-serif;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}