@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
  /* ── Portal (tema fosc) ───────────────────────────────────────────── */
  --bg-color: #0f172a;
  --card-bg: rgba(30, 41, 59, 0.7);
  --primary-color: #005fa3;
  --secondary-color: #eaeaea;
  --primary-hover: #4fc3f7;
  --primary-dropzone: #c5e1ec;
  --primary-dropzone-hover: #90d1eb;
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --input-bg: rgba(15, 23, 42, 0.5);
  --input-border: #334155;
  --error-color: #ef4444;
  --success-color: #22c55e;
  --glass-blur: blur(12px);
  --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
  --font-sans: 'Arimo', 'Inter', system-ui, -apple-system, sans-serif;

  /* ── Tokens compartits (designer + actes) ─────────────────────────── */
  --color-bg: #f9f9f9;
  --color-bg-secondary: #cccccc;
  --color-border-design: #999999;
  --color-primary: #005fa3;
  --color-secondary: #eaeaea;
  --color-accent: #4fc3f7;
  --color-ia: #6366f1;
  /* Indigo tecnològic IA */
  --color-noteditable: #707070;
  --color-hover: #f0bc80;
  --color-text: #222;
  --border-color: #c7c7c7;
  /* Color de vora estàndard */
  --bg-hover: #f0f7ff;
  /* Blau molt clar per a estats hover */
  --color-bg-soft: #fafafa;
  /* Gris gairebé blanc per a zones de fons suaus */
  --imatge-bg-light: #ffffff;
  /* Fons clar per a elements d'imatge i inputs */
  --color-signature-bg: rgba(200, 200, 200, 0.9);
  /* Fons clar per a zones de signatura */
  --font-main: 'Arimo', Arial, sans-serif;

  /* ── Mides Mòbil (Touch targets) ─────────────────────────────────── */
  --mob-btn-size: 20px;
  --mob-icon-size: 18px;

  /* ── Layout globals ───────────────────────────────────────────────── */
  --header-height: 54px;
  --icon-nav-size: 30px;
  --radius: 8px;
  --aside-width: 300px;
  --padding-content: 1.5em;
  --gap-container: 1em;
  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.1);
  --color-primary-dark: #004a80;

  /* ── Layout globals (Issue #5) ────────────────────────────────────── */
  --app-width: 90vw;
  --app-margin-top: 1.5rem;
  --app-max-width: 96vw;
}

@media (min-width: 1921px) {
  :root {
    --app-width: 86vw;
  }
}

/* ── Utilities d'elements ─────────────────────────────────────────── */
.g-component-error {
  color: var(--error-color, #ef4444);
  border: 1px solid var(--error-color, #ef4444);
  padding: 4px;
  font-size: 0.75rem;
  border-radius: 4px;
  background: rgba(239, 68, 68, 0.05);
  font-family: var(--font-main, sans-serif);
}