/*
  Gabriel Airlines — design tokens ("Deep Space", premium revision)
  Single source of truth for color, type, spacing, radius, shadow and motion.
  Every other stylesheet in this project should read these variables instead
  of hardcoding values.
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* ---- color: surface ---- */
  --bg-void: #05070d;
  --bg-elevated: #0b0f1a;
  --bg-elevated-2: #10192b;

  /* ---- color: glass ---- */
  --glass-bg: rgba(255, 255, 255, 0.045);
  --glass-bg-strong: rgba(255, 255, 255, 0.075);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-border-bright: rgba(255, 255, 255, 0.22);
  --glass-blur: blur(24px) saturate(150%);

  /* ---- color: text ---- */
  --text-primary: #f5f7fb;
  --text-secondary: rgba(245, 247, 251, 0.66);
  --text-muted: rgba(245, 247, 251, 0.42);

  /* ---- color: accent ---- */
  --accent-cyan: #22d3ee;
  --accent-blue: #6c8cff;
  --accent-violet: #a78bfa;
  --accent-gradient: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue));
  --accent-gradient-wide: linear-gradient(115deg, var(--accent-cyan), var(--accent-blue), var(--accent-violet), var(--accent-cyan));
  --accent-glow: rgba(34, 211, 238, 0.35);

  /* ---- color: aurora / mesh background ---- */
  --mesh-1: rgba(34, 211, 238, 0.16);
  --mesh-2: rgba(108, 140, 255, 0.14);
  --mesh-3: rgba(167, 139, 250, 0.1);

  /* ---- color: state ---- */
  --danger: #ff5470;
  --danger-glow: rgba(255, 84, 112, 0.35);
  --success: #4ade80;

  /* ---- type ---- */
  --font-display: "Inter", -apple-system, "SF Pro Display", sans-serif;
  --font-body: "Inter", -apple-system, "SF Pro Text", sans-serif;

  /* ---- spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---- radius scale (16-24px, per brief) ---- */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---- shadow ---- */
  --shadow-panel: 0 24px 70px rgba(0, 0, 0, 0.5);
  --shadow-glow-cyan: 0 0 40px var(--accent-glow);
  --shadow-glow-danger: 0 0 24px var(--danger-glow);

  /* ---- motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 220ms;
  --duration-slow: 400ms;
}