/* =============================================
   RUTGON – base.css
   Reset, CSS Variables, Theme Tokens, Body
   ============================================= */

/* ---------- RESET ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ===== DARK THEME (default) ===== */
:root {
  --bg-base:       #080d17;
  --bg-surface:    #0d1526;
  --bg-card:       #111a2e;
  --bg-card-hover: #162035;
  --border:        rgba(99, 120, 255, 0.15);
  --border-hover:  rgba(99, 120, 255, 0.40);

  --accent-1:      #6366f1;
  --accent-2:      #8b5cf6;
  --accent-3:      #06b6d4;

  --text-primary:  #f1f5ff;
  --text-secondary:#94a3b8;
  --text-muted:    #4a5568;

  --gradient-main:    linear-gradient(135deg, var(--accent-1), var(--accent-2));
  --gradient-button:  linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%);
  --gradient-glow:    radial-gradient(ellipse at center, rgba(99,102,241,0.25) 0%, transparent 70%);

  --icon-success:   #10b981;
  --icon-error:     #ef4444;
  --icon-star:      #f59e0b;
  --icon-link:      #06b6d4;
  --icon-logo:      linear-gradient(135deg, #fbbf24, #f59e0b);

  --section-py: 100px;
  --container:  1200px;

  --font:        'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur:         0.3s;

  --navbar-scrolled-bg: rgba(8, 13, 23, 0.85);
  --card-overlay:       rgba(255,255,255,0.1);
  --url-box-bg:         rgba(17, 26, 46, 0.8);
  --result-box-bg:      rgba(17, 26, 46, 0.9);
  --ghost-bg:           rgba(255,255,255,0.05);
  --ghost-bg-hover:     rgba(255,255,255,0.1);
  --tag-bg:             rgba(99,102,241,0.15);
  --tag-border:         rgba(99,102,241,0.3);
}

/* ===== LIGHT THEME ===== */
[data-theme="light"] {
  --bg-base:       #f5f7ff;
  --bg-surface:    #eef1fb;
  --bg-card:       #ffffff;
  --bg-card-hover: #f0f4ff;
  --border:        rgba(99, 102, 241, 0.2);
  --border-hover:  rgba(99, 102, 241, 0.45);

  --accent-1:      #5253cc;
  --accent-2:      #7c3aed;
  --accent-3:      #0891b2;

  --text-primary:  #0f172a;
  --text-secondary:#475569;
  --text-muted:    #94a3b8;

  --gradient-main:   linear-gradient(135deg, #5253cc, #7c3aed);
  --gradient-button: linear-gradient(135deg, #5253cc 0%, #7c3aed 50%, #0891b2 100%);
  --gradient-glow:   radial-gradient(ellipse at center, rgba(99,102,241,0.18) 0%, transparent 70%);

  --icon-success:   #059669;
  --icon-error:     #dc2626;
  --icon-star:      #d97706;
  --icon-link:      #0891b2;
  --icon-logo:      linear-gradient(135deg, #f59e0b, #ea580c);

  --navbar-scrolled-bg: rgba(245, 247, 255, 0.92);
  --card-overlay:       rgba(0,0,0,0.04);
  --url-box-bg:         rgba(255, 255, 255, 0.85);
  --result-box-bg:      rgba(255, 255, 255, 0.95);
  --ghost-bg:           rgba(0,0,0,0.04);
  --ghost-bg-hover:     rgba(0,0,0,0.08);
  --tag-bg:             rgba(99,102,241,0.1);
  --tag-border:         rgba(99,102,241,0.25);
}

/* ---------- GLOBAL TRANSITION (Theme Switch) ---------- */
*, *::before, *::after {
  transition-property: background-color, border-color, color, box-shadow, transform;
  transition-duration: 0.3s;
  transition-timing-function: var(--ease-spring);
}

/* Zero-Flash utility */
.no-transition, .no-transition * {
  transition: none !important;
}

/* Exclude animation-driven elements */
canvas, .bar, .hero-glow, .badge-dot, .scroll-arrow,
[class*="animation"], .float-card {
  transition: none !important;
}

/* ---------- BASE ---------- */
html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background-color: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}