/* Tokens de disseny (Pla §7.2). El tema segueix el del dispositiu (NFR-007).
   Contrastos calculats a tests/static/contrast.test.js. */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/bricolage-grotesque-5.3.0-latin-wght.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  --paper: #F2F6F7;
  --surface: #FFFFFF;
  --ink: #0D1F2D;
  --ink-muted: #41576A;
  --brand: #0B3A5B;
  --on-brand: #FFFFFF;
  --accent: #F4B223;
  --on-accent: #0D1F2D;
  --line: #D3DCE3;
  --line-strong: #66798B;
  --focus: #0B3A5B;
  --danger: #B3261E;
  --danger-bg: #FCE9E7;
  --on-danger-bg: #7A1710;
  --ok: #17663A;
  --ok-bg: #E3F4EA;
  --on-ok-bg: #0F4A29;

  --font-sans: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Escala de text (raó 1,25 des d'1 rem). */
  --text-sm: 0.8rem;
  --text-base: 1rem;
  --text-md: 1.25rem;
  --text-lg: 1.563rem;
  --text-xl: 1.953rem;
  --text-2xl: 2.441rem;
  --text-3xl: 3.052rem;
  --text-greeting: clamp(2.441rem, 1.2rem + 4vw, 3.815rem);

  /* Espaiat: 4, 8, 12, 16, 24, 32, 48, 64 px. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  --radius: 0.5rem;

  /* Paleta del mosaic (decorativa): 0 Mar, 1 Cel, 2 Turquesa, 3 Calç, 4 Ginesta. */
  --tile-0: #0B3A5B;
  --tile-1: #7DBDEA;
  --tile-2: #19A8A0;
  --tile-3: #DCE7EB;
  --tile-4: #F4B223;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0A1722;
    --surface: #112433;
    --ink: #E7EEF3;
    --ink-muted: #A5B7C6;
    --brand: #7DBDEA;
    --on-brand: #06131D;
    --line: #25384A;
    --line-strong: #6F8AA0;
    --focus: #F4B223;
    --danger: #FF9E91;
    --danger-bg: #3A1612;
    --on-danger-bg: #FFD6D0;
    --ok: #8FD9A8;
    --ok-bg: #10301F;
    --on-ok-bg: #C8F0D6;
    --tile-3: #1E3A4F;
  }
}