/* =========================================================================
   BASE: colors (els mateixos de l'app), tipografia, reset i accessibilitat
   ========================================================================= */

/* ---------- Colors (mode clar) ---------- */
:root {
  /* Marca: degradats i accents */
  --brand-violet: #6C4DF6;
  --brand-magenta: #C13FD8;
  --brand-pink: #F72585;
  --brand-coral: #FF6B6B;
  --brand-amber: #FFA41B;
  --brand-teal: #12B5A6;
  --brand-green: #3DDC84;
  --brand-blue: #3A86FF;
  --brand-indigo: #4338CA;
  --brand-cyan: #06B6D4;

  /* Rols de Material 3 */
  --primary: #6C4DF6;
  --on-primary: #FFFFFF;
  --primary-container: #ECE6FF;
  --secondary: #E0156F;
  --secondary-container: #FFE0EF;
  --on-secondary-container: #3E0020;
  --bg: #FBF8FF;
  --on-bg: #1C1B22;
  --on-variant: #4A4458;
  --outline: #7A7489;
  --outline-variant: #D9D2E8;
  --surface-low: #F4EFFF;
  --surface: #EFE9FC;
  --surface-high: #E9E3F7;
  --viewer-bg: #0E0C1C;

  /* Paleta pastel de xips, estadístiques i icones (fons / text) */
  --c-violet: #ECE6FF; --on-violet: #3A1FB8;
  --c-pink:   #FFE0EF; --on-pink:   #9E0D52;
  --c-teal:   #D4F5F1; --on-teal:   #075E55;
  --c-amber:  #FFF0D1; --on-amber:  #7A4A00;
  --c-blue:   #DCE8FF; --on-blue:   #1446A0;
  --c-coral:  #FFE3E3; --on-coral:  #A12626;

  /* Forma i espai */
  --r-sm: 14px;
  --r-md: 22px;
  --r-lg: 28px;
  --r-xl: 32px;
  --gap: 16px;
  --page-max: 1120px;
  --bar-h: 72px;
  --nav-h: 80px;

  --font: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}

/* ---------- Colors (mode fosc: blau nit, mai negre pur) ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --primary: #C8B8FF;
    --on-primary: #2E0F8F;
    --primary-container: #3A2D7A;
    --secondary: #FFB0CF;
    --secondary-container: #8C0F4A;
    --on-secondary-container: #FFE0EF;
    --bg: #15132A;
    --on-bg: #E7E1F5;
    --on-variant: #CBC3DE;
    --outline: #948DA8;
    --outline-variant: #3D3756;
    --surface-low: #1E1B37;
    --surface: #23203D;
    --surface-high: #2D2948;

    --c-violet: #3A2D7A; --on-violet: #E2DAFF;
    --c-pink:   #6B1240; --on-pink:   #FFD0E6;
    --c-teal:   #0E4A44; --on-teal:   #BFF2EB;
    --c-amber:  #5C3D00; --on-amber:  #FFE2A8;
    --c-blue:   #1B3A73; --on-blue:   #D2E1FF;
    --c-coral:  #6B2424; --on-coral:  #FFD6D6;
    color-scheme: dark;
  }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.no-scroll { overflow: hidden; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--on-bg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* ---------- Icones ---------- */
.icon { width: 24px; height: 24px; flex: none; fill: currentColor; }

/* ---------- Tons de la paleta ---------- */
.tone-violet { background: var(--c-violet); color: var(--on-violet); }
.tone-pink   { background: var(--c-pink);   color: var(--on-pink); }
.tone-teal   { background: var(--c-teal);   color: var(--on-teal); }
.tone-amber  { background: var(--c-amber);  color: var(--on-amber); }
.tone-blue   { background: var(--c-blue);   color: var(--on-blue); }
.tone-coral  { background: var(--c-coral);  color: var(--on-coral); }

/* ---------- Accessibilitat ---------- */
:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
  border-radius: 8px;
}
.skip-link {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 700;
  transform: translateY(-150%);
}
.skip-link:focus { transform: none; }

/* ---------- Animació d'entrada (una sola seqüència en carregar cada pantalla) ---------- */
@keyframes enter {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
.is-entering { animation: enter .42s cubic-bezier(.2, .7, .2, 1) both; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}