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

:root {
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Dark (default) */
  --bg-from: #2c0a30;
  --bg-mid:  #5a0f28;
  --bg-to:   #8c1525;

  --fg:             #ffffff;
  --fg-secondary:   rgba(255, 255, 255, 0.5);

  --card-bg:           rgba(255, 255, 255, 0.09);
  --card-border:       rgba(255, 255, 255, 0.13);
  --card-shadow:       0 2px 12px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.06) inset;
  --card-hover-bg:     rgba(255, 255, 255, 0.14);
  --card-hover-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.10) inset;
}

[data-theme='light'] {
  --bg-from: #e0c4ef;
  --bg-mid:  #e8b8cc;
  --bg-to:   #f0b8be;

  --fg:           #1c0a22;
  --fg-secondary: rgba(28, 10, 34, 0.5);

  --card-bg:           rgba(255, 255, 255, 0.50);
  --card-border:       rgba(255, 255, 255, 0.85);
  --card-shadow:       0 2px 12px rgba(120,30,60,0.08), 0 1px 0 rgba(255,255,255,0.9) inset;
  --card-hover-bg:     rgba(255, 255, 255, 0.70);
  --card-hover-shadow: 0 16px 48px rgba(120,30,60,0.15), 0 1px 0 rgba(255,255,255,0.9) inset;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  min-height: 100vh;
  font-family: var(--font);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* Multi-stop radial mesh gradient pour plus de profondeur */
  background:
    radial-gradient(ellipse at 10% 10%, rgba(120, 30, 180, 0.35) 0%, transparent 55%),
    radial-gradient(ellipse at 90% 85%, rgba(160, 20, 40, 0.4) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(80, 10, 50, 0.6) 0%, transparent 80%),
    linear-gradient(160deg, var(--bg-from) 0%, var(--bg-mid) 50%, var(--bg-to) 100%);
  background-attachment: fixed;
  transition: background var(--ease) 260ms;
}

a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; outline: none; font-family: var(--font); }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 10px; }

/* Inputs */
input[type="text"],
input[type="password"],
input[type="url"],
input[type="email"] {
  width: 100%;
  padding: 0.82rem 1rem;
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 12px;
  color: var(--fg);
  font-family: var(--font);
  font-size: 0.92rem;
  outline: none;
  transition: all 240ms var(--ease);
}
input:focus {
  border-color: rgba(255,255,255,0.45);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.11);
}
input::placeholder { color: var(--fg-secondary); }