/* ===========================
   Design Tokens — Liquid Silk Edition
   Warm glassmorphism with violet/pink/orange palette
   =========================== */

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

:root {
  /* --- Colors: Core --- */
  --color-bg: #fef7f0;
  --color-surface: #fff5eb;
  --color-surface-raised: #ffffff;
  --color-input-bg: rgba(139,92,246,0.04);
  --color-accent-teal: #ec4899;
  --color-text: #1a1025;
  --color-text-secondary: #581c87;
  --color-primary: #8b5cf6;
  --color-primary-hover: #7c3aed;
  --color-primary-disabled: rgba(139,92,246,0.3);
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-critical: #8b5cf6;
  --color-border: rgba(139,92,246,0.12);

  /* --- Colors: Mode badges --- */
  --color-badge-sitemap-bg: rgba(139,92,246,0.1);
  --color-badge-sitemap-text: #7c3aed;
  --color-badge-single-bg: rgba(249,115,22,0.1);
  --color-badge-single-text: #c2410c;
  --color-badge-urllist-bg: rgba(236,72,153,0.1);
  --color-badge-urllist-text: #be185d;

  /* --- Colors: Issue tags --- */
  --color-error-bg: rgba(239,68,68,0.06);
  --color-error-border: rgba(239,68,68,0.15);
  --color-error-text: #991b1b;
  --color-warning-bg: rgba(245,158,11,0.06);
  --color-warning-border: rgba(245,158,11,0.15);
  --color-warning-text: #92400e;

  /* --- Colors: Check badges --- */
  --color-success-bg: rgba(16,185,129,0.08);
  --color-success-text: #065f46;
  --color-success-border: rgba(16,185,129,0.15);
  --color-neutral-bg: rgba(139,92,246,0.05);
  --color-neutral-text: #6b21a8;

  /* --- Colors: Buttons --- */
  --color-danger-hover: #b91c1c;
  --color-ghost-hover: rgba(139,92,246,0.06);

  /* --- Colors: Info/Setup banner --- */
  --color-info-bg: rgba(139,92,246,0.06);
  --color-info-border: rgba(139,92,246,0.12);

  /* --- Colors: Overlay --- */
  --color-overlay: rgba(26,16,37,0.85);

  /* --- Premium gradients --- */
  --gradient-primary: linear-gradient(160deg, #8b5cf6, #ec4899, #f97316);
  --gradient-primary-hover: linear-gradient(160deg, #7c3aed, #db2777, #ea580c);
  --gradient-accent: linear-gradient(160deg, #8b5cf6, #ec4899, #f97316);
  --gradient-surface: linear-gradient(135deg, rgba(255,245,235,0.9), rgba(254,247,240,0.7));
  --gradient-header: linear-gradient(160deg, #8b5cf6, #ec4899, #f97316);

  /* --- Glassmorphism --- */
  --glass-bg: rgba(255, 255, 255, 0.65);
  --glass-border: rgba(139,92,246,0.12);
  --glass-blur: 40px;

  /* --- Spacing --- */
  --space-xs: 0.375rem;
  --space-sm: 0.625rem;
  --space-md: 1rem;
  --space-lg: 1.25rem;
  --space-xl: 1.75rem;
  --space-2xl: 2.5rem;
  --space-2_5xl: 2.25rem;
  --space-3xl: 3.5rem;

  /* --- Typography: Font sizes --- */
  --text-xs: 0.625rem;
  --text-sm: 0.75rem;
  --text-base: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.1875rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;

  /* --- Typography: Font weights --- */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* --- Typography: Line heights --- */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* --- Font family --- */
  --font: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;

  /* --- Shadows (warm violet-tinted) --- */
  --shadow-xs: 0 1px 3px rgba(139,92,246,0.04);
  --shadow-sm: 0 2px 8px rgba(139,92,246,0.06);
  --shadow-md: 0 8px 24px rgba(139,92,246,0.08);
  --shadow-lg: 0 16px 48px rgba(139,92,246,0.1);
  --shadow-xl: 0 24px 64px rgba(139,92,246,0.12);
  --shadow-glow: 0 0 30px rgba(139,92,246,0.2);
  --shadow-glow-pink: 0 0 30px rgba(236,72,153,0.2);
  --shadow-glow-success: 0 0 30px rgba(16,185,129,0.2);
  --shadow-glow-error: 0 0 20px rgba(239,68,68,0.15);

  /* --- Radius --- */
  --radius-sm: 9px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* --- Focus --- */
  --focus-outline-width: 2px;
  --focus-outline-offset: 2px;
  --focus-ring-color: rgba(139,92,246,0.25);

  /* --- Layout --- */
  --max-width: 960px;
  --space-page-x: clamp(2rem, 5vw, 6rem);
  --space-section-gap: var(--space-3xl);
  --color-border-subtle: rgba(139, 92, 246, 0.06);

  /* --- Transitions (spring easing, slightly slower) --- */
  --transition-fast: 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-base: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-slow: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===========================
   Dark Mode — Liquid Silk
   =========================== */

:root[data-theme="dark"] {
  --color-bg: #1a1025;
  --color-surface: #241533;
  --color-surface-raised: #2d1b40;
  --color-input-bg: rgba(139,92,246,0.08);
  --color-accent-teal: #ec4899;
  --color-text: #f5f0ff;
  --color-text-secondary: #c4b5fd;
  --color-primary: #a78bfa;
  --color-primary-hover: #c4b5fd;
  --color-primary-disabled: rgba(139,92,246,0.2);
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-critical: #8b5cf6;
  --color-border: rgba(139,92,246,0.12);

  --color-badge-sitemap-bg: rgba(139,92,246,0.15);
  --color-badge-sitemap-text: #c4b5fd;
  --color-badge-single-bg: rgba(249,115,22,0.15);
  --color-badge-single-text: #fdba74;
  --color-badge-urllist-bg: rgba(236,72,153,0.15);
  --color-badge-urllist-text: #f9a8d4;

  --color-error-bg: rgba(239,68,68,0.1);
  --color-error-border: rgba(239,68,68,0.25);
  --color-error-text: #fca5a5;
  --color-warning-bg: rgba(245,158,11,0.1);
  --color-warning-border: rgba(245,158,11,0.25);
  --color-warning-text: #fcd34d;

  --color-success-bg: rgba(16,185,129,0.1);
  --color-success-text: #a7f3d0;
  --color-success-border: rgba(16,185,129,0.25);
  --color-neutral-bg: rgba(139,92,246,0.08);
  --color-neutral-text: #c4b5fd;

  --color-danger-hover: #dc2626;
  --color-ghost-hover: rgba(139,92,246,0.08);

  --color-info-bg: rgba(139,92,246,0.1);
  --color-info-border: rgba(139,92,246,0.2);

  --color-overlay: rgba(26,16,37,0.9);

  /* Dark mode gradients */
  --gradient-primary: linear-gradient(160deg, #a78bfa, #ec4899, #f97316);
  --gradient-primary-hover: linear-gradient(160deg, #c4b5fd, #f472b6, #fb923c);
  --gradient-accent: linear-gradient(160deg, #8b5cf6, #ec4899, #f97316);
  --gradient-surface: linear-gradient(135deg, rgba(36,21,51,0.8), rgba(26,16,37,0.6));
  --gradient-header: linear-gradient(160deg, #8b5cf6, #ec4899, #f97316);

  --color-border-subtle: rgba(139, 92, 246, 0.1);

  /* Dark glassmorphism */
  --glass-bg: rgba(26,16,37,0.5);
  --glass-border: rgba(139,92,246,0.12);
  --glass-blur: 40px;

  /* Dark shadows with warm violet glow */
  --shadow-xs: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.25), 0 0 4px rgba(139,92,246,0.05);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.3), 0 0 8px rgba(139,92,246,0.06);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.35), 0 0 16px rgba(139,92,246,0.08);
  --shadow-xl: 0 24px 64px rgba(0,0,0,0.4), 0 0 24px rgba(139,92,246,0.1);
  --shadow-glow: 0 0 30px rgba(139,92,246,0.25);
  --shadow-glow-pink: 0 0 30px rgba(236,72,153,0.25);
  --shadow-glow-success: 0 0 30px rgba(16,185,129,0.2);
  --shadow-glow-error: 0 0 30px rgba(239,68,68,0.2);
}

/* OS preference: auto dark mode */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #1a1025;
    --color-surface: #241533;
    --color-surface-raised: #2d1b40;
    --color-input-bg: rgba(139,92,246,0.08);
    --color-accent-teal: #ec4899;
    --color-text: #f5f0ff;
    --color-text-secondary: #c4b5fd;
    --color-primary: #a78bfa;
    --color-primary-hover: #c4b5fd;
    --color-primary-disabled: rgba(139,92,246,0.2);
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-error: #ef4444;
    --color-critical: #8b5cf6;
    --color-border: rgba(139,92,246,0.12);

    --color-badge-sitemap-bg: rgba(139,92,246,0.15);
    --color-badge-sitemap-text: #c4b5fd;
    --color-badge-single-bg: rgba(249,115,22,0.15);
    --color-badge-single-text: #fdba74;
    --color-badge-urllist-bg: rgba(236,72,153,0.15);
    --color-badge-urllist-text: #f9a8d4;

    --color-error-bg: rgba(239,68,68,0.1);
    --color-error-border: rgba(239,68,68,0.25);
    --color-error-text: #fca5a5;
    --color-warning-bg: rgba(245,158,11,0.1);
    --color-warning-border: rgba(245,158,11,0.25);
    --color-warning-text: #fcd34d;

    --color-success-bg: rgba(16,185,129,0.1);
    --color-success-text: #a7f3d0;
    --color-success-border: rgba(16,185,129,0.25);
    --color-neutral-bg: rgba(139,92,246,0.08);
    --color-neutral-text: #c4b5fd;

    --color-danger-hover: #dc2626;
    --color-ghost-hover: rgba(139,92,246,0.08);

    --color-info-bg: rgba(139,92,246,0.1);
    --color-info-border: rgba(139,92,246,0.2);

    --color-overlay: rgba(26,16,37,0.9);

    --gradient-primary: linear-gradient(160deg, #a78bfa, #ec4899, #f97316);
    --gradient-primary-hover: linear-gradient(160deg, #c4b5fd, #f472b6, #fb923c);
    --gradient-accent: linear-gradient(160deg, #8b5cf6, #ec4899, #f97316);
    --gradient-surface: linear-gradient(135deg, rgba(36,21,51,0.8), rgba(26,16,37,0.6));
    --gradient-header: linear-gradient(160deg, #8b5cf6, #ec4899, #f97316);

    --color-border-subtle: rgba(139, 92, 246, 0.1);

    --glass-bg: rgba(26,16,37,0.5);
    --glass-border: rgba(139,92,246,0.12);
    --glass-blur: 40px;

    --shadow-xs: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.25), 0 0 4px rgba(139,92,246,0.05);
    --shadow-md: 0 8px 24px rgba(0,0,0,0.3), 0 0 8px rgba(139,92,246,0.06);
    --shadow-lg: 0 16px 48px rgba(0,0,0,0.35), 0 0 16px rgba(139,92,246,0.08);
    --shadow-xl: 0 24px 64px rgba(0,0,0,0.4), 0 0 24px rgba(139,92,246,0.1);
    --shadow-glow: 0 0 30px rgba(139,92,246,0.25);
    --shadow-glow-pink: 0 0 30px rgba(236,72,153,0.25);
    --shadow-glow-success: 0 0 30px rgba(16,185,129,0.2);
    --shadow-glow-error: 0 0 30px rgba(239,68,68,0.2);
  }
}

/* Explicit light mode override */
:root[data-theme="light"] {
  --color-bg: #fef7f0;
  --color-surface: #fff5eb;
  --color-surface-raised: #ffffff;
  --color-input-bg: rgba(139,92,246,0.04);
  --color-accent-teal: #ec4899;
  --color-text: #1a1025;
  --color-text-secondary: #581c87;
  --color-primary: #8b5cf6;
  --color-primary-hover: #7c3aed;
  --color-primary-disabled: rgba(139,92,246,0.3);
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-critical: #8b5cf6;
  --color-border: rgba(139,92,246,0.12);
}