/* ────────────────────────────────────────────────────────────────────────────
   NEREU · tokens del sistema de disseny («Nereu DS»)
   L'única font de colors, tipografia, espais, radis, ombres i capes. Cap vista
   escriu un hex, una mida de lletra o una ombra: fa servir aquests noms.
   Clar per defecte; fosc amb prefers-color-scheme o amb [data-theme="dark"]
   (el tema triat al menú del compte guanya sempre al del sistema).
   Els contrastos (WCAG 2.x) són als comentaris; test/disseny-lint.test.js els
   torna a calcular.
   ────────────────────────────────────────────────────────────────────────── */

/* ─── fonts autoallotjades: cap CDN (vegeu /fonts/OFL.txt) ─── */
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/atkinson-hyperlegible-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/atkinson-hyperlegible-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/atkinson-hyperlegible-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/atkinson-hyperlegible-latin-ext-700.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/fonts/montserrat-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/fonts/montserrat-latin-ext-var.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: light;

  /* ── neutres: càlids, però molt menys grocs que el lli d'abans ── */
  --c-bg: #F7F7F4;              /* llenç de l'app */
  --c-surface: #FFFFFF;         /* targetes, taules, fulls */
  --c-surface-subtle: #F1F1ED;  /* capçalera de taula, pous, hover */
  --c-surface-sunken: #E9E9E4;  /* premut, base de l'esquelet */
  --c-sidebar: #F1F1ED;         /* barra lateral */
  --c-border: #E2E3DD;          /* separadors i contorn decoratiu */
  --c-border-strong: #C9CCC4;   /* contorn de taula, separadors forts */
  --c-border-input: #858F8D;    /* contorn de camp: 3,3:1 sobre blanc (WCAG 1.4.11) */
  --c-text: #14262B;            /* 14,6:1 sobre el llenç */
  --c-text-2: #4A5A5E;          /* 7,1:1 sobre blanc */
  --c-text-3: #5F6C70;          /* 5,1:1 sobre el llenç, 4,8:1 sobre subtle: el mínim per a qualsevol text */
  --c-text-inverse: #FFFFFF;

  /* ── marca ── */
  --c-brand: #123C46;           /* petroli: botó principal, navegació activa. Blanc a sobre 11,9:1 */
  --c-brand-hover: #0D2F37;
  --c-brand-subtle: #E7EEF0;
  --c-on-brand: #FFFFFF;
  --c-accent: #177B70;          /* verd marí: enllaços, focus, seleccionat. 5,2:1 sobre blanc */
  --c-accent-hover: #11665D;
  --c-accent-subtle: #E6F3F0;
  --c-neso: #62CBB3;            /* només sobre superfícies fosques i a la marca de la Neso */
  --c-neso-surface: #EAF6F2;    /* targetes de la Neso */
  --c-neso-border: #BFE2D8;
  --c-focus: #177B70;
  --c-overlay: rgba(10, 24, 28, .45);
  --c-tooltip: #14262B;
  --c-on-tooltip: #FFFFFF;

  /* ── estat (text / fons / vora) ── */
  --c-success: #1F7A4D; --c-success-bg: #E7F4EC; --c-success-border: #B6DEC6;
  --c-warning: #8A4B0F; --c-warning-bg: #FBF0DF; --c-warning-border: #EDD1A6;
  --c-danger:  #B42318; --c-danger-bg:  #FDECEA; --c-danger-border:  #F4C7C1;
  --c-info:    #2E5AAC; --c-info-bg:    #EAF0FB; --c-info-border:    #C3D3F1;

  /* ── dades: ordre fix, no s'amplia (s1 previst/real, s2 comparació, s3 diners, s4 secundari) ── */
  --c-s1: #0E9C78; --c-s2: #D2691E; --c-s3: #3A6FD8; --c-s4: #B0576F;
  --c-band: rgba(14, 156, 120, .14);
  --c-grid: #E2E3DD; --c-axis: #C9CCC4; --c-threshold: #A45D12;

  /* ── tipografia: dues famílies ── */
  --font-ui: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Montserrat", var(--font-ui);
  --font-num: "Montserrat", var(--font-ui);       /* xifres de KPI i preus: sense el zero barrat */

  --fs-display: 2rem;      --lh-display: 2.5rem;   /* 32/40 */
  --fs-h1: 1.5rem;         --lh-h1: 2rem;          /* 24/32 títol de pàgina (22/28 a mòbil) */
  --fs-h2: 1.125rem;       --lh-h2: 1.625rem;      /* 18/26 secció */
  --fs-h3: 1rem;           --lh-h3: 1.5rem;        /* 16/24 títol de targeta */
  --fs-body: 0.9375rem;    --lh-body: 1.375rem;    /* 15/22 escriptori; 16/24 tàctil */
  --fs-sm: 0.8125rem;      --lh-sm: 1.125rem;      /* 13/18 ajuda, meta */
  --fs-xs: 0.75rem;        --lh-xs: 1rem;          /* 12/16 mai més petit */
  --fs-kpi: 1.75rem;       --lh-kpi: 2rem;         /* 28/32 */
  --fw-regular: 400; --fw-bold: 700; --fw-display: 600;
  --tracking-overline: .04em;

  /* ── espai: graella de 4 px ── */
  --sp-0: 0; --sp-1: 2px; --sp-2: 4px; --sp-3: 8px; --sp-4: 12px; --sp-5: 16px;
  --sp-6: 20px; --sp-7: 24px; --sp-8: 32px; --sp-9: 40px; --sp-10: 48px; --sp-11: 64px;

  /* ── radis: cinc valors ── */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-full: 999px;

  /* ── elevació: les targetes són planes; ombres només per al que sura ── */
  --e-0: none;
  --e-1: 0 1px 2px rgba(16, 32, 36, .06);
  --e-2: 0 2px 4px rgba(16, 32, 36, .06), 0 8px 16px -4px rgba(16, 32, 36, .10);
  --e-3: 0 12px 32px -8px rgba(16, 32, 36, .22);

  /* ── moviment ── */
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 280ms;
  --ease: cubic-bezier(.2, 0, 0, 1);

  /* ── capes ── */
  --z-sticky: 10; --z-nav: 20; --z-dropdown: 30; --z-sheet: 40; --z-modal: 50; --z-toast: 60;

  /* ── maqueta ── */
  --sidebar-w: 248px; --sidebar-w-collapsed: 64px; --header-h: 56px; --tabbar-h: 64px;
  --content-max: 1280px; --content-pad: 32px; --content-pad-m: 16px; --reading-max: 68ch;

  /* ── controls ── */
  --ctl-h-sm: 32px; --ctl-h: 40px; --ctl-h-lg: 48px;
  --tap: 36px;   /* objectiu mínim de dit (44 px amb punter gruixut) */
}

/* Dit, no ratolí: tots els controls (també els petits) de 44 px i lletra de 16 px (l'iPhone no fa zoom). */
@media (pointer: coarse) {
  :root { --ctl-h: 44px; --ctl-h-sm: 44px; --tap: 44px; --fs-body: 1rem; --lh-body: 1.5rem; }
}

/* ─── fosc · el sistema ho demana i no s'ha triat «clar» ─── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --c-bg: #0E1719; --c-surface: #152124; --c-surface-subtle: #1B292D; --c-surface-sunken: #0A1214;
    --c-sidebar: #111C1F;
    --c-border: #24363A; --c-border-strong: #33484D; --c-border-input: #6A7E82; /* 3,9:1 sobre la superfície */
    --c-text: #E6EDEB; --c-text-2: #A7B5B3; --c-text-3: #8E9D9B;
    --c-text-inverse: #062226;
    --c-brand: #5CC7AE; --c-brand-hover: #74D3BD; --c-brand-subtle: #12302C; --c-on-brand: #062226;
    --c-accent: #5CC7AE; --c-accent-hover: #74D3BD; --c-accent-subtle: #12302C;
    --c-neso: #62CBB3; --c-neso-surface: #102A27; --c-neso-border: #1E4A43; --c-focus: #74D3BD;
    --c-overlay: rgba(0, 0, 0, .6); --c-tooltip: #E6EDEB; --c-on-tooltip: #0E1719;
    --c-success: #4CC38A; --c-success-bg: #11291E; --c-success-border: #1F4A35;
    --c-warning: #E3A04B; --c-warning-bg: #2E2210; --c-warning-border: #5A4220;
    --c-danger: #F27B6E; --c-danger-bg: #34171A; --c-danger-border: #5E2A2A;
    --c-info: #86A9F2; --c-info-bg: #16223A; --c-info-border: #2B3F66;
    --c-s1: #2FBF97; --c-s2: #E8853A; --c-s3: #6E9BF0; --c-s4: #D27C93; --c-band: rgba(47, 191, 151, .18);
    --c-grid: #24363A; --c-axis: #33484D; --c-threshold: #E3A04B;
    --e-1: 0 1px 2px rgba(0, 0, 0, .4); --e-2: 0 8px 24px -6px rgba(0, 0, 0, .5); --e-3: 0 16px 40px -8px rgba(0, 0, 0, .6);
  }
}
/* ─── fosc · triat al menú del compte (CSS no pot compartir el bloc: és el mateix) ─── */
:root[data-theme="dark"] {
  color-scheme: dark;
  --c-bg: #0E1719; --c-surface: #152124; --c-surface-subtle: #1B292D; --c-surface-sunken: #0A1214;
  --c-sidebar: #111C1F;
  --c-border: #24363A; --c-border-strong: #33484D; --c-border-input: #6A7E82;
  --c-text: #E6EDEB; --c-text-2: #A7B5B3; --c-text-3: #8E9D9B;
  --c-text-inverse: #062226;
  --c-brand: #5CC7AE; --c-brand-hover: #74D3BD; --c-brand-subtle: #12302C; --c-on-brand: #062226;
  --c-accent: #5CC7AE; --c-accent-hover: #74D3BD; --c-accent-subtle: #12302C;
  --c-neso: #62CBB3; --c-neso-surface: #102A27; --c-neso-border: #1E4A43; --c-focus: #74D3BD;
  --c-overlay: rgba(0, 0, 0, .6); --c-tooltip: #E6EDEB; --c-on-tooltip: #0E1719;
  --c-success: #4CC38A; --c-success-bg: #11291E; --c-success-border: #1F4A35;
  --c-warning: #E3A04B; --c-warning-bg: #2E2210; --c-warning-border: #5A4220;
  --c-danger: #F27B6E; --c-danger-bg: #34171A; --c-danger-border: #5E2A2A;
  --c-info: #86A9F2; --c-info-bg: #16223A; --c-info-border: #2B3F66;
  --c-s1: #2FBF97; --c-s2: #E8853A; --c-s3: #6E9BF0; --c-s4: #D27C93; --c-band: rgba(47, 191, 151, .18);
  --c-grid: #24363A; --c-axis: #33484D; --c-threshold: #E3A04B;
  --e-1: 0 1px 2px rgba(0, 0, 0, .4); --e-2: 0 8px 24px -6px rgba(0, 0, 0, .5); --e-3: 0 16px 40px -8px rgba(0, 0, 0, .6);
}