/* AIXOSQuiz Design Tokens — blue dark accent palette */
:root {
  /* Backgrounds */
  --bg: #050816;
  --bg2: #020617;
  --panel: #0f172a;
  --panel-soft: #111c31;
  --panel-2: #081121;
  --glass: rgba(17, 25, 40, 0.72);
  --glass-2: rgba(12, 18, 32, 0.88);

  /* Borders */
  --line: #23324a;
  --border: rgba(148, 163, 184, 0.14);
  --border-2: rgba(56, 189, 248, 0.36);
  --line-soft: rgba(125, 211, 252, 0.16);

  /* Text */
  --text: #f8fafc;
  --soft: #cbd5e1;
  --muted: #94a3b8;
  --muted2: #b8c6de;

  /* Accents */
  --cyan: #38bdf8;
  --cyan-dark: #0ea5e9;
  --cyan2: #0ea5e9;
  --blue: #60a5fa;
  --green: #22c55e;
  --yellow: #facc15;
  --violet: #8b5cf6;
  --danger: #f87171;

  /* Gradients */
  --gradient-brand: linear-gradient(135deg, #38bdf8 0%, #67e8f9 50%, #60a5fa 100%);
  --gradient-heading: linear-gradient(135deg, #ffffff 0%, #bfe9ff 60%, #7dd3fc 100%);
  --gradient-card: linear-gradient(165deg, rgba(20, 33, 58, 0.95) 0%, rgba(10, 17, 31, 0.88) 100%);
  --gradient-glow: radial-gradient(ellipse at 50% 0%, rgba(56, 189, 248, 0.15), transparent 70%);

  /* Shadows */
  --shadow-sm: 0 4px 12px rgba(2, 6, 23, 0.25);
  --shadow-md: 0 12px 32px rgba(2, 6, 23, 0.35);
  --shadow-lg: 0 24px 60px rgba(2, 6, 23, 0.4);
  --shadow-glow: 0 0 40px rgba(56, 189, 248, 0.12);
  --shadow-glow-strong: 0 0 60px rgba(56, 189, 248, 0.2), 0 8px 32px rgba(56, 189, 248, 0.15);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* Layout */
  --container-max: 1520px;
  --gutter: clamp(16px, 2vw, 24px);
  --product-max: 1560px;

  /* Radii */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration: 0.25s;
}