/* ============================================
   MINDLOOPIA — Design Tokens
   Inspired by the logo: concentric circles,
   orbiting dots, navy-purple-orange palette
   ============================================ */

:root {
  /* ── Logo-Derived Palette ── */
  /* Navy (main circles) */
  --color-navy: #1A2354;
  --color-navy-light: #2A3680;
  --color-navy-dark: #0E1535;

  /* Purple (concentric rings) */
  --color-purple: #6B4FA0;
  --color-purple-light: #8B6BBF;
  --color-purple-dark: #4A3570;

  /* Orange (core gradient — the "sun") */
  --color-orange: #FF8C00;
  --color-orange-light: #FFB347;
  --color-orange-glow: rgba(255, 140, 0, 0.35);

  /* Accent Dots */
  --color-cyan: #00A0DC;
  --color-cyan-light: #4FC3F7;
  --color-yellow: #FFE135;
  --color-pink: #E91E8D;
  --color-blue: #4285F4;

  /* ── Primary / Secondary ── */
  --color-primary: var(--color-navy-light);
  --color-primary-light: var(--color-cyan);
  --color-primary-dark: var(--color-navy);
  --color-primary-glow: rgba(42, 54, 128, 0.4);

  --color-accent: var(--color-orange);
  --color-accent-light: var(--color-orange-light);
  --color-accent-dark: #E07800;
  --color-accent-glow: var(--color-orange-glow);

  /* ── Background (Dark Theme — deep space feel) ── */
  --color-bg-deep: #080C1A;
  --color-bg-base: #0D1225;
  --color-bg-surface: #131836;
  --color-bg-elevated: #1A2048;
  --color-bg-glass: rgba(19, 24, 54, 0.7);

  /* ── Text ── */
  --color-text-primary: #F5F6FA;
  --color-text-secondary: #E0E4F0;
  --color-text-muted: #B8BFD4;
  --color-text-ia: var(--color-orange);
  /* The "IA" in MindLoopIA */

  /* ── Borders ── */
  --color-border: rgba(107, 79, 160, 0.12);
  --color-border-hover: rgba(107, 79, 160, 0.25);
  --color-border-accent: rgba(255, 140, 0, 0.25);

  /* ── Gradients ── */
  --gradient-hero: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(42, 54, 128, 0.15) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 70% 30%, rgba(107, 79, 160, 0.1) 0%, transparent 60%),
    linear-gradient(180deg, #080C1A 0%, #0D1225 100%);
  --gradient-primary: linear-gradient(135deg, var(--color-navy-light) 0%, var(--color-purple) 100%);
  --gradient-orange: linear-gradient(135deg, var(--color-orange) 0%, var(--color-orange-light) 100%);
  --gradient-card: linear-gradient(145deg, rgba(19, 24, 54, 0.85) 0%, rgba(13, 18, 37, 0.95) 100%);
  --gradient-text: linear-gradient(135deg, var(--color-cyan) 0%, var(--color-purple-light) 50%, var(--color-orange) 100%);
  --gradient-cta: linear-gradient(135deg, var(--color-orange) 0%, var(--color-orange-light) 100%);
  --gradient-ring: conic-gradient(var(--color-cyan),
      var(--color-blue),
      var(--color-purple),
      var(--color-pink),
      var(--color-orange),
      var(--color-yellow),
      var(--color-cyan));

  /* ── Typography ── */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Outfit', var(--font-primary);

  --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);
  --text-sm: clamp(0.8rem, 0.75rem + 0.3vw, 0.9rem);
  --text-base: clamp(0.95rem, 0.9rem + 0.3vw, 1.05rem);
  --text-lg: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  --text-xl: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
  --text-2xl: clamp(1.8rem, 1.5rem + 1.2vw, 2.4rem);
  --text-3xl: clamp(2.2rem, 1.8rem + 1.8vw, 3.2rem);
  --text-4xl: clamp(2.8rem, 2.2rem + 2.5vw, 4.2rem);

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --leading-tight: 1.15;
  --leading-normal: 1.6;
  --leading-relaxed: 1.8;

  /* ── Spacing ── */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6rem;
  --space-section: clamp(4rem, 3rem + 5vw, 8rem);

  /* ── Layout ── */
  --max-width: 1200px;
  --max-width-narrow: 800px;
  --container-padding: clamp(1.25rem, 1rem + 2vw, 3rem);

  /* ── Radius ── */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 48px rgba(0, 0, 0, 0.4);
  --shadow-glow-orange: 0 0 30px var(--color-orange-glow);
  --shadow-glow-purple: 0 0 30px rgba(107, 79, 160, 0.3);
  --shadow-glow-cyan: 0 0 30px rgba(0, 160, 220, 0.25);

  /* ── Transitions ── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;

  /* ── Glass ── */
  --glass-blur: 20px;
  --glass-bg: rgba(19, 24, 54, 0.7);
  --glass-border: rgba(107, 79, 160, 0.1);

  /* ── Z-Index ── */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
}