:root {
  /* 🎨 Colors corporatius */
  --color-principal: #1e3a8a;       /* Blau BorsaDocent */
  --color-principal-fosc: #162d6b;  /* 🔹 Afegit per hover */
  --color-daurat: #d4af37;          /* Daurat principal */
  --color-daurat-fosc: #a67c00;     /* 🟡 Afegit per gradient i hover */
  --color-fons: #f9fafb;
  --color-text: #111827;
  --color-subtext: #6b7280;         /* ⚙️ Nou: gris per textos secundaris */

  /* 🌈 Colors d’estat */
  --color-success: #22c55e;
  --color-error: #ef4444;
  --color-warning: #facc15;
  --color-info: #3b82f6;

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

  /* 📐 Espais i radis */
  --radius-s: 6px;      /* ➕ Nou per elements petits */
  --radius: 12px;
  --radius-xl: 20px;    /* ➕ Nou per targetes grans */
  --padding-xs: 8px;    /* ➕ Escala d’espais petita */
  --padding: 16px;
  --padding-l: 24px;    /* ➕ Escala gran */
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.08);

  /* 📏 Mides responsives */
  --max-width-container: 1200px;
  --header-height: 70px;

  /* ⚡ Transicions globals */
  --transition: all 0.25s ease;

  /* 🟣 Gradients de marca */
  --gradient-daurat: linear-gradient(135deg, var(--color-daurat-fosc), var(--color-daurat));
  --gradient-blau: linear-gradient(135deg, #1e3a8a, #3b82f6);

  /* 🩶 Tons suaus opcionals */
  --color-daurat-clar: #f3e9c2;
  --color-blau-clar: #e0e7ff;

  /* 🧱 Superfícies */
--color-surface: #ffffff;
--color-surface-2: #f3f4f6;
--color-border: #e5e7eb;

}

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

  /* 🌙 Fons */
  --color-fons: #0b1220;

  /* 🅰️ Textos */
  --color-text: #e5e7eb;
  --color-subtext: #9ca3af;
  --color-title-blue: #1a237e;


  /* 🌈 Estats */
  --color-success: #22c55e;
  --color-error: #f87171;
  --color-warning: #fde047;
  --color-info: #60a5fa;

  /* 🌫️ Ombres */
  --shadow: 0 6px 18px rgba(0, 0, 0, 0.4);

  /* 🧱 Superfícies dark */
--color-surface: #0f172a;
--color-surface-2: #111827;
--color-border: rgba(255,255,255,0.08);



}