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

/* ============================================================
   MYTOOLGALAXY — DESIGN SYSTEM TOKENS
   Single source of truth for the entire visual language.
   Future-ready: all tokens map to semantic roles so a
   backend-driven theme switcher can override via JS.
   ============================================================ */

:root {
  /* ── Font Families ───────────────────────────────────────── */
  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body:    'Inter',  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    'Fira Code', 'Cascadia Code', ui-monospace, monospace;

  /* ── Spacing Scale (4px base) ────────────────────────────── */
  --space-2xs: 0.25rem;   /*  4px */
  --space-xs:  0.5rem;    /*  8px */
  --space-sm:  0.75rem;   /* 12px */
  --space-md:  1rem;      /* 16px */
  --space-lg:  1.5rem;    /* 24px */
  --space-xl:  2rem;      /* 32px */
  --space-2xl: 3rem;      /* 48px */
  --space-3xl: 4rem;      /* 64px */
  --space-4xl: 6rem;      /* 96px */

  /* ── Border Radii ────────────────────────────────────────── */
  --radius-xs:   0.25rem;  /*  4px */
  --radius-sm:   0.5rem;   /*  8px */
  --radius-md:   0.75rem;  /* 12px */
  --radius-lg:   1rem;     /* 16px */
  --radius-xl:   1.5rem;   /* 24px */
  --radius-2xl:  2rem;     /* 32px */
  --radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-xs:  0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --shadow-sm:  0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.09), 0 4px 6px -4px rgba(0, 0, 0, 0.06);
  --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.06);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.20);

  --shadow-glow-blue:   0 0 24px 0 rgba(37, 99, 235, 0.22);
  --shadow-glow-violet: 0 0 24px 0 rgba(124, 58, 237, 0.22);
  --shadow-glow-primary: 0 8px 32px -4px rgba(37, 99, 235, 0.30);
  --shadow-card-hover:  0 20px 40px -8px rgba(37, 99, 235, 0.14), 0 8px 16px -4px rgba(0,0,0,0.08);

  /* ── Transitions ─────────────────────────────────────────── */
  --transition-fast:   0.14s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.24s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   0.44s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Animation Durations ─────────────────────────────────── */
  --anim-fast:   200ms;
  --anim-normal: 350ms;
  --anim-slow:   600ms;

  /* ── Focus ───────────────────────────────────────────────── */
  --focus-ring:        2px solid var(--primary);
  --focus-ring-offset: 3px;

  /* ── Z-Index Scale ───────────────────────────────────────── */
  --z-dropdown:  200;
  --z-sticky:    300;
  --z-drawer:    400;
  --z-modal:     500;
  --z-toast:     600;
  --z-tooltip:   700;

  /* ================================================================
     LIGHT THEME — COLOR PALETTE
     ================================================================ */

  /* Background surfaces */
  --bg-primary:   #ffffff;
  --bg-secondary: #f8fafc;   /* Slate 50  */
  --bg-tertiary:  #f1f5f9;   /* Slate 100 */
  --bg-elevated:  #ffffff;

  /* Borders */
  --border-color: #e2e8f0;   /* Slate 200 */
  --border-hover: #cbd5e1;   /* Slate 300 */
  --border-strong: #94a3b8;  /* Slate 400 */

  /* Text */
  --text-primary:   #0f172a; /* Slate 900 */
  --text-secondary: #475569; /* Slate 600 */
  --text-tertiary:  #94a3b8; /* Slate 400 */
  --text-white:     #ffffff;
  --text-inverse:   #0f172a;

  /* Brand — Blue */
  --primary:       #2563eb;  /* Blue 600 */
  --primary-hover: #1d4ed8;  /* Blue 700 */
  --primary-dark:  #1e40af;  /* Blue 800 */
  --primary-light: #eff6ff;  /* Blue 50  */
  --primary-alpha: rgba(37, 99, 235, 0.10);
  --primary-alpha-hover: rgba(37, 99, 235, 0.18);

  /* Brand — Violet */
  --secondary:       #7c3aed; /* Violet 600 */
  --secondary-hover: #6d28d9; /* Violet 700 */
  --secondary-light: #f5f3ff; /* Violet 50  */
  --secondary-alpha: rgba(124, 58, 237, 0.10);

  /* Gradients */
  --gradient-primary:    linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  --gradient-primary-r:  linear-gradient(135deg, #7c3aed 0%, #2563eb 100%);
  --gradient-hero:       radial-gradient(ellipse 80% 60% at 60% 10%, rgba(37,99,235,0.13) 0%, transparent 70%),
                         radial-gradient(ellipse 50% 40% at 10% 90%, rgba(124,58,237,0.10) 0%, transparent 60%),
                         radial-gradient(ellipse 40% 30% at 95% 85%, rgba(6,182,212,0.07) 0%, transparent 50%);
  --gradient-card:       linear-gradient(145deg, rgba(255,255,255,0) 0%, rgba(37,99,235,0.04) 100%);
  --gradient-stats:      linear-gradient(135deg, #1d4ed8 0%, #6d28d9 50%, #0e7490 100%);
  --gradient-footer:     linear-gradient(180deg, #0f172a 0%, #090d1a 100%);
  --gradient-text:       linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  --gradient-shimmer:    linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%);

  /* Category accent colors */
  --color-pdf:     #ef4444;
  --color-image:   #f59e0b;
  --color-ai:      #8b5cf6;
  --color-convert: #10b981;
  --color-text:    #3b82f6;
  --color-other:   #6366f1;

  /* Semantic — Success */
  --success:       #10b981;  /* Emerald 500 */
  --success-hover: #059669;  /* Emerald 600 */
  --success-light: #ecfdf5;  /* Emerald 50  */
  --success-alpha: rgba(16, 185, 129, 0.12);

  /* Semantic — Warning */
  --warning:       #f59e0b;  /* Amber 500 */
  --warning-hover: #d97706;  /* Amber 600 */
  --warning-light: #fffbeb;  /* Amber 50  */
  --warning-alpha: rgba(245, 158, 11, 0.12);

  /* Semantic — Error */
  --error:       #ef4444;    /* Red 500 */
  --error-hover: #dc2626;    /* Red 600 */
  --error-light: #fef2f2;    /* Red 50  */
  --error-alpha: rgba(239, 68, 68, 0.12);

  /* Glassmorphism */
  --glass-bg:     rgba(255, 255, 255, 0.75);
  --glass-border: rgba(226, 232, 240, 0.70);
  --glass-blur:   blur(16px) saturate(1.8);
  --glass-shadow: 0 8px 32px rgba(15, 23, 42, 0.08);
}

/* ================================================================
   DARK THEME OVERRIDES
   ================================================================ */
[data-theme="dark"] {
  /* Background surfaces */
  --bg-primary:   #080d18;   /* Near-black blue-tinted */
  --bg-secondary: #0d1526;   /* Deep navy */
  --bg-tertiary:  #152035;   /* Lighter navy */
  --bg-elevated:  #111d33;

  /* Borders */
  --border-color:  #1e2d48;
  --border-hover:  #2d4060;
  --border-strong: #3d5278;

  /* Text */
  --text-primary:   #f1f5f9;  /* Slate 100 */
  --text-secondary: #94a3b8;  /* Slate 400 */
  --text-tertiary:  #4a6080;  /* Muted */
  --text-white:     #ffffff;
  --text-inverse:   #0f172a;

  /* Brand — Blue (brighter in dark) */
  --primary:       #4f8ef7;
  --primary-hover: #6ba5ff;
  --primary-dark:  #3b82f6;
  --primary-light: #0f2044;
  --primary-alpha: rgba(79, 142, 247, 0.14);
  --primary-alpha-hover: rgba(79, 142, 247, 0.22);

  /* Brand — Violet */
  --secondary:       #9d6ff7;
  --secondary-hover: #b48cfb;
  --secondary-light: #1e1040;
  --secondary-alpha: rgba(157, 111, 247, 0.14);

  /* Gradients */
  --gradient-primary:    linear-gradient(135deg, #4f8ef7 0%, #9d6ff7 100%);
  --gradient-primary-r:  linear-gradient(135deg, #9d6ff7 0%, #4f8ef7 100%);
  --gradient-hero:       radial-gradient(ellipse 80% 60% at 60% 10%, rgba(79,142,247,0.16) 0%, transparent 70%),
                         radial-gradient(ellipse 50% 40% at 10% 90%, rgba(157,111,247,0.12) 0%, transparent 60%),
                         radial-gradient(ellipse 40% 30% at 95% 85%, rgba(6,182,212,0.08) 0%, transparent 50%);
  --gradient-card:       linear-gradient(145deg, rgba(255,255,255,0) 0%, rgba(79,142,247,0.05) 100%);
  --gradient-stats:      linear-gradient(135deg, #1d4ed8 0%, #7c3aed 50%, #0e7490 100%);
  --gradient-footer:     linear-gradient(180deg, #050c18 0%, #020609 100%);
  --gradient-text:       linear-gradient(135deg, #4f8ef7 0%, #9d6ff7 100%);
  --gradient-shimmer:    linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.07) 50%, transparent 100%);

  /* Semantic colors (slightly brighter for dark) */
  --success:       #34d399;
  --success-hover: #6ee7b7;
  --success-light: #052e16;
  --success-alpha: rgba(52, 211, 153, 0.14);

  --warning:       #fbbf24;
  --warning-hover: #fcd34d;
  --warning-light: #2d1800;
  --warning-alpha: rgba(251, 191, 36, 0.14);

  --error:       #f87171;
  --error-hover: #fca5a5;
  --error-light: #2d0a0a;
  --error-alpha: rgba(248, 113, 113, 0.14);

  /* Glassmorphism */
  --glass-bg:     rgba(8, 13, 24, 0.80);
  --glass-border: rgba(30, 45, 72, 0.80);
  --glass-blur:   blur(16px) saturate(1.6);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.40);

  /* Shadows — more intense in dark */
  --shadow-xs:  0 1px 2px 0 rgba(0, 0, 0, 0.30);
  --shadow-sm:  0 1px 3px 0 rgba(0, 0, 0, 0.40), 0 1px 2px -1px rgba(0, 0, 0, 0.30);
  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.45), 0 2px 4px -2px rgba(0, 0, 0, 0.35);
  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.50), 0 4px 6px -4px rgba(0, 0, 0, 0.40);
  --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.55), 0 8px 10px -6px rgba(0, 0, 0, 0.45);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.70);

  --shadow-glow-blue:    0 0 28px 0 rgba(79, 142, 247, 0.30);
  --shadow-glow-violet:  0 0 28px 0 rgba(157, 111, 247, 0.30);
  --shadow-glow-primary: 0 8px 32px -4px rgba(79, 142, 247, 0.38);
  --shadow-card-hover:   0 20px 40px -8px rgba(79, 142, 247, 0.20), 0 8px 16px -4px rgba(0,0,0,0.40);
}