/*
 * Small Talk: tot l'estil visual és aquí. Canviar colors, tipografia, radis o espais és tocar aquest fitxer.
 * Estil: cafeteria càlida (crema, terracota, espresso), net i amb molt d'espai. Mode fosc més avall.
 */
:root {
  color-scheme: light dark;

  /* Tipografia (de sistema: sense descàrregues) */
  --font-body: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, ui-serif, serif;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.625rem;
  --text-2xl: 2.125rem;
  --weight-normal: 400;
  --weight-bold: 650;
  --line: 1.45;

  /* Colors */
  --c-bg: #faf6f0;           /* crema */
  --c-surface: #ffffff;
  --c-surface-2: #f3ebe0;    /* paper de sucre */
  --c-text: #2b211b;         /* espresso */
  --c-text-muted: #75665a;
  --c-border: #e6dccf;
  --c-primary: #b5532a;      /* terracota */
  --c-primary-hover: #9c4521;
  --c-on-primary: #ffffff;
  --c-accent: #5f8a6a;       /* sàlvia */
  --c-on-accent: #ffffff;
  --c-danger: #b3261e;
  --c-warning-bg: #fff1c9;
  --c-warning-text: #5c4300;
  --c-warning-border: #e9c46a;
  --c-backdrop: rgba(43, 33, 27, 0.35);
  --c-marker: #ffffff;
  --c-marker-mine: #fbe3d6;
  --c-marker-joined: #dcebdf;
  --c-me-dot: #2f6fdf;

  /* Formes */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(43, 33, 27, 0.12);
  --shadow-md: 0 6px 24px rgba(43, 33, 27, 0.16);

  /* Espais */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Mides */
  --tap: 52px;               /* alçada mínima dels botons */
  --content-max: 560px;
  --marker-size: 46px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-bg: #1b1512;
    --c-surface: #26201c;
    --c-surface-2: #322a24;
    --c-text: #f4ece2;
    --c-text-muted: #b9aa9b;
    --c-border: #41372f;
    --c-primary: #e0794a;
    --c-primary-hover: #ea8d62;
    --c-on-primary: #1b1512;
    --c-accent: #8cb898;
    --c-on-accent: #1b1512;
    --c-danger: #ff8a80;
    --c-warning-bg: #3d3216;
    --c-warning-text: #f6dd9a;
    --c-warning-border: #7a6224;
    --c-backdrop: rgba(0, 0, 0, 0.5);
    --c-marker: #322a24;
    --c-marker-mine: #5a3424;
    --c-marker-joined: #2e4a37;
    --c-me-dot: #6aa0ff;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.5);
  }
}