/* ============================================================
   GeoMapes — design tokens (v1.0, 2026-04-30)
   Paleta: cartogràfica (oceà-blau + terra-ocre), parenta de Quest-Test
   Tipografia: Outfit (titulars/UI) + Inter (text llarg) — vendoritzades
   ------------------------------------------------------------
   Ús: importa aquest fitxer al començament de style.css amb
       @import url('./assets/brand/tokens.css');
   o copia el contingut sencer al :root del projecte.
   ============================================================ */

/* ---- Tipografia vendoritzada (sense CDN) -----------------
   Els fitxers .woff2 viuen a assets/fonts/. Veure BRAND.md
   §4 per al procediment de descàrrega.
----------------------------------------------------------- */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/outfit-variable.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/inter-variable.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-variable.woff2') format('woff2-variations');
}

:root {
  /* ── Brand: oceà (blau primari) ─────────────────────────── */
  --c-brand-50:   #e8f1f7;
  --c-brand-100:  #c7dbe9;
  --c-brand-200:  #8db8d2;
  --c-brand-300:  #4d92b6;
  --c-brand-400:  #1f6f9c;   /* Brand mid (logo wordmark "Mapes") */
  --c-brand:      #15527a;   /* Brand principal (CTA, links) */
  --c-brand-600:  #0f3d5c;   /* Brand fosc (titulars logo) */
  --c-brand-700:  #0a2a40;   /* Brand pregon (mode fosc surface) */
  --c-brand-bg:   #f3f8fb;   /* Wash de fons subtil */

  /* ── Accent: terra (ocre secundari) ─────────────────────── */
  --c-accent-100: #f7e6c6;
  --c-accent-300: #e6c071;
  --c-accent:     #d8a14a;   /* Accent principal (badges, hover icones) */
  --c-accent-700: #b27326;   /* Accent fosc */

  /* ── Pin / alerta visual (taronja vermellós) ────────────── */
  --c-pin:        #e2533b;
  --c-pin-dark:   #a8311c;

  /* ── Superfícies (neutres, sense tint blau) ─────────────── */
  --c-bg:         #f6f7f9;
  --c-surface:    #ffffff;
  --c-surface-2:  #eef1f5;
  --c-border:     #dbe1ea;
  --c-border-strong: #b9c2cf;

  /* ── Text ────────────────────────────────────────────────── */
  --c-text:       #0e1726;
  --c-text-muted: #5b6b78;
  --c-text-soft:  #8a96a3;
  --c-text-on-brand: #ffffff;

  /* ── Semàntics (AA, distingibles per daltònics
                    quan s'acompanyen d'icona/patró) ────────── */
  --c-correct:    #1c8f5c;   /* verd terra */
  --c-correct-bg: #d6efe2;
  --c-error:      #c8392a;   /* vermell teula */
  --c-error-bg:   #fae0dc;
  --c-warn:       #b07000;   /* mostassa */
  --c-warn-bg:    #fbe8c4;
  --c-info:       #1f6f9c;   /* mateix oceà mid */
  --c-info-bg:    #d8e9f4;

  /* ── Tokens de mapa (paleta cartogràfica) ───────────────── */
  --c-map-ocean:    #cfe2ee;
  --c-map-land:     #f1e7d2;
  --c-map-border:   #a8b5c2;
  --c-map-grid:     rgba(31, 111, 156, .18);
  --c-map-correct:  #1c8f5c;
  --c-map-error:    #c8392a;
  --c-map-hint:     #d8a14a;
  --c-map-ghost:    rgba(21, 82, 122, .35);

  /* ── Radis ──────────────────────────────────────────────── */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius:    12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ── Ombres (neutres, suau) ─────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(14, 23, 38, .06);
  --shadow:    0 2px 8px rgba(14, 23, 38, .09);
  --shadow-md: 0 6px 18px rgba(14, 23, 38, .12);
  --shadow-lg: 0 14px 40px rgba(14, 23, 38, .18);
  --shadow-focus: 0 0 0 3px rgba(31, 111, 156, .35);

  /* ── Tipografia ─────────────────────────────────────────── */
  --font-head: 'Outfit', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Escala tipogràfica (rem, base 16px) */
  --fs-3xs: 0.6875rem;   /* 11px — micro-labels (coords) */
  --fs-2xs: 0.75rem;     /* 12px — caption */
  --fs-xs:  0.8125rem;   /* 13px — meta */
  --fs-sm:  0.875rem;    /* 14px — UI compacta */
  --fs-md:  1rem;        /* 16px — body */
  --fs-lg:  1.125rem;    /* 18px — body destacat */
  --fs-xl:  1.375rem;    /* 22px — H4 */
  --fs-2xl: 1.75rem;     /* 28px — H3 */
  --fs-3xl: 2.25rem;     /* 36px — H2 */
  --fs-4xl: 3rem;        /* 48px — H1 */
  --fs-display: 4rem;    /* 64px — landing hero */

  /* Pesos */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  /* Line-heights */
  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-base:  1.55;
  --lh-loose: 1.75;

  /* Espaiat (escala 4px) */
  --sp-1:  4px;   --sp-2:  8px;   --sp-3:  12px;  --sp-4:  16px;
  --sp-5: 20px;   --sp-6: 24px;   --sp-7:  28px;  --sp-8:  32px;
  --sp-10: 40px;  --sp-12: 48px;  --sp-16: 64px;  --sp-20: 80px;

  /* Mides toc (ORBYS-friendly) */
  --tap-min: 44px;     /* WCAG 2.5.5 minimum */
  --tap-orbys: 64px;   /* mínim recomanat tauler 4K */

  /* Transicions */
  --ease:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    320ms;
}

/* ── Mode fosc (per a partides en aula amb projecció) ─────── */
.theme-dark {
  --c-bg:         #0a1a26;
  --c-surface:    #102a3d;
  --c-surface-2:  #163749;
  --c-border:     #244a62;
  --c-border-strong: #3a6a86;

  --c-text:       #eaf2f8;
  --c-text-muted: #9ab2c2;
  --c-text-soft:  #6f8696;

  --c-brand-bg:   #0e2438;

  --c-map-ocean:  #163749;
  --c-map-land:   #4a3a22;
  --c-map-border: #3a6a86;
  --c-map-grid:   rgba(141, 184, 210, .22);

  --shadow:    0 2px 10px rgba(0, 0, 0, .55);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .6);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, .7);
}

/* ── Mode tauler ORBYS (escala +25%) ──────────────────────── */
.theme-orbys {
  --fs-md:  1.25rem;
  --fs-lg:  1.5rem;
  --fs-xl:  1.875rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;
  --tap-min: var(--tap-orbys);
}

/* ── Reduce motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}