/* ═══════════════════════════════════════════════════════════════
   GCD Design Tokens — Exact match: gandestesicastigadiferit.com
   Extracted 2026-04-27 from live website CSS vars
═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Primary Green (buttons, active, CTA, progress) ── */
  --emerald:        #34D399;
  --emerald-light:  #6EE7B7;
  --emerald-dark:   #2BB87E;
  --emerald-dim:    rgba(52, 211, 153, 0.12);
  --emerald-glow:   rgba(52, 211, 153, 0.25);

  /* ── Gold Accent (text gradients, subtle highlights, card borders) ── */
  --gold:           #C6A44E;
  --gold-light:     #D4B85C;
  --gold-dark:      #A88A3A;
  --gold-dim:       rgba(198, 164, 78, 0.10);

  /* ── Night (backgrounds — from website) ── */
  --night:          #1E2235;
  --night-card:     #2A3050;
  --night-elevated: #353D60;
  --night-surface:  #404870;

  /* ── Text ── */
  --cream:          #FAFAF6;
  --cream-dim:      #D0C9BC;
  --cream-muted:    #A09888;

  /* ── Remap legacy vars ── */
  --navy:       #1E2235;
  --navy-dark:  #1E2235;
  --navy-mid:   #2A3050;
  --teal:       #34D399;
  --teal-light: #6EE7B7;
  --teal-dim:   rgba(52, 211, 153, 0.12);
  --white:      #FAFAF6;
  --bg:         #1E2235;
  --card-bg:    #2A3050;
  --text:       #FAFAF6;
  --muted:      #D0C9BC;
  --border:     rgba(245, 240, 232, 0.10);

  /* ── Shadows ── */
  --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-lg:  0 20px 60px rgba(0, 0, 0, 0.6);
  --shadow-emerald: 0 4px 20px rgba(52, 211, 153, 0.2);
  --shadow-gold: 0 0 30px rgba(198, 164, 78, 0.15);

  /* ── Border radius (website uses 1rem = 16px) ── */
  --r-sm:   8px;
  --r-md:   16px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-full: 9999px;

  /* ── Typography ── */
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --font-heading: 'Space Grotesk', 'Inter', system-ui, sans-serif;

  /* ── Transitions ── */
  --trans:      0.2s ease;
  --trans-slow: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --trans-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Gradients ── */
  --gradient-primary: linear-gradient(135deg, #34D399, #6EE7B7);
  --gradient-gold: linear-gradient(135deg, #C6A44E, #D4B85C);
  --gradient-gold-text: linear-gradient(135deg, #C6A44E 0%, #FAFAF6 55%, #C6A44E 100%);
  --gradient-night: linear-gradient(135deg, #1E2235 0%, #2A3050 100%);
  --gradient-card: linear-gradient(135deg, rgba(42, 48, 80, 0.8), rgba(53, 61, 96, 0.6));

  /* ── System ── */
  --color-success:  #34D399;
  --color-error:    #EF4444;
  --color-warning:  #F59E0B;
  --color-info:     #3B82F6;

  /* ── Gray scale (legacy md- components) ── */
  --gray-50:  rgba(245, 240, 232, 0.04);
  --gray-100: rgba(245, 240, 232, 0.08);
  --gray-200: rgba(245, 240, 232, 0.12);
  --gray-300: #A09888;
  --gray-400: #A09888;
  --gray-500: #D0C9BC;
  --gray-600: #D0C9BC;
  --gray-700: #353D60;
  --gray-800: #2A3050;
  --gray-900: #FAFAF6;
}

/* ── Glass card ── */
.glass {
  background: rgba(42, 48, 80, 0.55);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid rgba(245, 240, 232, 0.06);
}
.glass-hover {
  transition: border-color var(--trans-slow), box-shadow var(--trans-slow), transform var(--trans-slow);
}
.glass-hover:hover {
  border-color: rgba(198, 164, 78, 0.15);
  box-shadow: 0 8px 40px rgba(52, 211, 153, 0.06);
  transform: translateY(-2px);
}

/* ── Gradient text ── */
.text-gradient-gold {
  background: var(--gradient-gold-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-emerald {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Glow ── */
.glow-emerald { box-shadow: var(--shadow-emerald); }
.glow-gold    { box-shadow: var(--shadow-gold); }

/* ── Gradient separator ── */
.line-gradient {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(52, 211, 153, 0.15), transparent);
}

/* ── Film grain overlay ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.018;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--night); }
::-webkit-scrollbar-thumb { background: rgba(198, 164, 78, 0.2); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: rgba(198, 164, 78, 0.4); }

/* ── Selection ── */
::selection { background: rgba(198, 164, 78, 0.2); color: var(--cream); }

/* ── Animations ── */
@keyframes float-cinematic {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(20px, -20px) scale(1.05); }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeScale {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.3); }
  50% { box-shadow: 0 0 20px 4px rgba(52, 211, 153, 0.1); }
}
@keyframes orb-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(80px, -60px) scale(1.1); }
  50% { transform: translate(40px, 40px) scale(0.95); }
  75% { transform: translate(-30px, 20px) scale(1.05); }
}
@keyframes orb-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(-60px, 40px) scale(1.08); }
  50% { transform: translate(30px, -50px) scale(0.92); }
  75% { transform: translate(50px, 30px) scale(1.03); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes breathe {
  0%, 100% { opacity: 0.04; }
  50% { opacity: 0.08; }
}

/* ── App background orbs (futuristic ambient) ── */
.app-bg-orbs {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.app-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.045;
  will-change: transform;
}
.orb-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, #C6A44E 0%, transparent 70%);
  top: -200px; left: -150px;
  animation: orb-drift-1 20s ease-in-out infinite;
}
.orb-2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, #D4B85C 0%, transparent 70%);
  bottom: -150px; right: -120px;
  animation: orb-drift-2 25s ease-in-out infinite;
}
.orb-3 {
  width: 350px; height: 350px;
  background: radial-gradient(circle, #6366F1 0%, transparent 70%);
  top: 50%; right: 10%;
  animation: orb-drift-1 18s ease-in-out infinite reverse;
  opacity: 0.03;
}
.orb-4 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, #C6A44E 0%, transparent 70%);
  top: 30%; left: 20%;
  animation: orb-drift-2 22s ease-in-out infinite;
  opacity: 0.025;
}