:root {
  /* Marca */
  --color-principal: #132c63;
  --color-principal-fosc: #0b1d46;
  --color-daurat: #d9b44a;
  --color-daurat-fosc: #a57a12;

  /* Superficies */
  --color-fons: #f3f6fb;
  --color-surface: rgba(255, 255, 255, 0.96);
  --color-surface-2: #f8faff;
  --color-surface-3: #e8edf5;
  --color-border: rgba(19, 44, 99, 0.12);
  --color-border-strong: rgba(19, 44, 99, 0.2);

  /* Text */
  --color-text: #182235;
  --color-subtext: #667085;
  --color-title: #132c63;
  --color-link: var(--color-principal);

  /* Estat */
  --color-success: #22c55e;
  --color-error: #ef4444;
  --color-warning: #d97706;
  --color-info: #3b82f6;

  /* Tipografia */
  --font-principal: 'Manrope', sans-serif;
  --font-secondary: 'Inter', system-ui, sans-serif;

  /* Espai i radi */
  --radius-xs: 6px;
  --radius-s: 12px;
  --radius: 18px;
  --radius-l: 24px;
  --radius-xl: 32px;
  --padding-xs: 8px;
  --padding: 20px;
  --padding-l: 32px;
  --section-gap: clamp(28px, 4vw, 56px);

  /* Ombres */
  --shadow-xs: 0 8px 22px rgba(11, 21, 38, 0.06);
  --shadow: 0 20px 54px rgba(11, 21, 38, 0.1);
  --shadow-lg: 0 30px 80px rgba(11, 21, 38, 0.16);

  /* Layout */
  --max-width-container: 1280px;
  --header-height: 70px;

  /* Transicions */
  --transition: all 0.22s ease;

  /* Gradients */
  --gradient-daurat: linear-gradient(135deg, #b88717, var(--color-daurat));
  --gradient-blau: linear-gradient(135deg, var(--color-principal-fosc), var(--color-principal) 48%, #234fa8);
  --gradient-hero: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 255, 0.98) 100%);
  --gradient-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 249, 255, 0.94) 100%);

  /* Tons suaus */
  --color-daurat-clar: #f3e5b5;
  --color-blau-clar: #edf3ff;
  --color-daurat-soft: #fff7df;
  --color-success-soft: #eaf8ef;
  --color-error-soft: #fef0f0;
  --color-warning-soft: #fff5e8;

  /* Focus */
  --focus-ring: 0 0 0 4px rgba(19, 44, 99, 0.12);
}

[data-theme="dark"] {
  /* Marca */
  --color-principal: #60a5fa;
  --color-principal-fosc: #3b82f6;
  --color-daurat: #f5d36a;
  --color-daurat-fosc: #e0b84a;

  /* Superficies */
  --color-fons: #0b1220;
  --color-surface: #0f172a;
  --color-surface-2: #111827;
  --color-surface-3: #1f2937;
  --color-border: rgba(255, 255, 255, 0.08);

  /* Text */
  --color-text: #e5e7eb;
  --color-subtext: #9ca3af;
  --color-title: #f8fafc;
  --color-link: #93c5fd;

  /* Estat */
  --color-success: #22c55e;
  --color-error: #f87171;
  --color-warning: #fbbf24;
  --color-info: #60a5fa;

  /* Tons suaus */
  --color-daurat-clar: rgba(245, 211, 106, 0.16);
  --color-blau-clar: rgba(96, 165, 250, 0.16);
  --color-daurat-soft: rgba(245, 211, 106, 0.12);
  --color-success-soft: rgba(34, 197, 94, 0.14);
  --color-error-soft: rgba(248, 113, 113, 0.14);
  --color-warning-soft: rgba(251, 191, 36, 0.14);

  /* Ombres i focus */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.34);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.48);
  --focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.18);
}