/* =====================================================================
   Teishen · Fitxes de disseny (tokens)
   Tot el sistema visual es controla des d'aquí.

   Concepte: el material de la botiga. Fons de paper kraft (bosses,
   caixes de cartró) i l'adhesiu taronja de l'etiqueta de preu.

   Dos temes, tots dos dins de la família del marró, sense blanc pur ni
   negre pur:
     · Kraft  (clar)  — paper d'embalar
     · Torrat (fosc)  — cafè torrat
   I dues paletes d'estats, per a cada tema:
     · estàndard  — verd, groc, vermell i blau
     · daltonisme — blau, groc, magenta i turquesa (adaptada d'Okabe-Ito)

   Atributs a <html> (també funcionen en qualsevol bloc):
     data-tema="clar" | "fosc"        (sense atribut: segueix el sistema)
     data-colors="daltonisme"         (sense atribut: paleta estàndard)

   Validació (disseny/eines/contrast.py i disseny/eines/daltonisme.py):
     · Text ≥ 7:1 (AAA) i < 13:1 per evitar l'enlluernament, també sobre
       els dos extrems dels degradats.
     · Text secundari i estats ≥ 4,5:1; text d'estat sobre el seu fons ≥ 5:1.
     · Vores de controls i focus ≥ 3:1.
     · Fons d'estat distingibles entre ells i de l'accent (ΔE a CAM02-UCS):
         paleta estàndard   — visió normal ≥ 15; deuteranopia, protanopia
                              i tritanopia ≥ 7,5 (prioritza la comoditat)
         paleta daltonisme  — ≥ 10 en les quatre visions
   ===================================================================== */

:root {
  /* ----- Tipografia ----- */
  --font-text: "Atkinson Next", "Segoe UI", system-ui, sans-serif;
  --font-xifres: "Atkinson Mono", ui-monospace, "Consolas", monospace;

  /* Escala de text de l'usuari: 100 %, 125 %, 150 %, 175 % o 200 %
     (WCAG 1.4.4). El zoom del navegador continua funcionant a sobre. */
  --escala: 1;

  /* Escala tipogràfica (proporció 1,2 sobre una base de 17 px) */
  --mida-xs: 0.8125rem;   /* 13 px — mai per a informació essencial */
  --mida-s: 0.9375rem;    /* 15 px */
  --mida-m: 1.0625rem;    /* 17 px — text base */
  --mida-l: 1.25rem;      /* 20 px */
  --mida-xl: 1.5rem;      /* 24 px */
  --mida-2xl: 1.875rem;   /* 30 px */
  --mida-3xl: 2.625rem;   /* 42 px — imports grans */

  --interlineat: 1.5;
  --interlineat-ajustat: 1.2;

  /* ----- Espai (graella de 4 px) ----- */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;

  /* ----- Formes: la jerarquia es llegeix pel radi ----- */
  --radi-control: 6px;    /* botons, camps */
  --radi-panell: 12px;    /* panells i diàlegs */
  --radi-pastilla: 999px; /* indicadors d'estat */

  /* Zona tàctil mínima del TPV */
  --toc-minim: 48px;

  /* ----- Moviment ----- */
  /* Paper d'un document (factura, tiquet): sempre clar, com quedarà imprès */
  --c-paper: #FFFDF9;
  --c-paper-text: #2A2019;
  --c-paper-text-suau: #5C4B3D;
  --c-paper-linia: #D3C2AC;
  --c-paper-vora: #8A7461;

  --durada: 140ms;
  --corba: cubic-bezier(0.2, 0, 0, 1);
}

/* =====================================================================
   Tema Kraft (clar), per defecte
   ===================================================================== */
:root,
[data-tema="clar"] {
  --c-fons: #E4D6C2;
  --c-fons-alt: #EADFCE;       /* extrem clar del degradat de fons */
  --c-superficie: #EFE5D7;
  --c-superficie-alta: #F6EFE4;
  --c-linia: #D3C2AC;          /* separadors interns, sense requisit de contrast */
  --c-separador: #B29C83;      /* divisions entre zones (lateral, tiquet, barra) */
  --c-vora: #8A7461;           /* vores de controls: ≥ 3:1 */
  --c-text: #2A2019;
  --c-text-suau: #5C4B3D;
  --c-accent: #9F5719;         /* fons de l'acció principal */
  --c-sobre-accent: #FBF4EA;
  --c-accent-text: #874511;    /* accent usat com a text o enllaç */
  --c-accent-suau: #E8C9A4;    /* fons de selecció */
  --c-focus: #2A5B66;          /* anell de focus: ≥ 3:1 sobre tots els fons */
  --logo-cantell: #643B19;     /* logotip: cantell en relleu (taronja torrat) */
  --logo-punt: #2A2019;        /* logotip: fons dels punts braille */

  /* Estats: color (text, icona, vora) + fons tenyit */
  --c-exit: #125B3A;
  --c-exit-fons: #C8DED0;      /* verd sàlvia, sense estridència */
  --c-avis: #5B4C05;
  --c-avis-fons: #ECDB9A;
  --c-error: #901117;          /* vermell viu sobre rosat clar */
  --c-error-fons: #FBB7AF;
  --c-info: #0B4B57;
  --c-info-fons: #8AD1E3;

  /* Profunditat: les zones principals es separen amb una ombra càlida */
  --ombra-zona: 0 0 0 1px var(--c-separador), 0 10px 30px -18px rgb(80 50 25 / 0.55);
  --ombra-tecla: 0 1px 0 rgb(80 50 25 / 0.12);

  /* Degradats molt suaus: el contrast es valida als dos extrems */
  --g-fons: linear-gradient(180deg, var(--c-fons-alt) 0%, var(--c-fons) 45%);
  --g-superficie: linear-gradient(180deg, var(--c-superficie-alta) 0%, var(--c-superficie) 18rem);
  --g-tecla: linear-gradient(180deg, var(--c-superficie-alta) 0%, var(--c-superficie) 100%);

  color-scheme: light;
}

/* =====================================================================
   Tema Torrat (fosc)
   ===================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="clar"]) {
    --c-fons: #211915;
    --c-fons-alt: #2A201B;
    --c-superficie: #2C221C;
    --c-superficie-alta: #382B23;
    --c-linia: #4A3B31;
    --c-separador: #64503F;
    --c-vora: #8E7967;
    --c-text: #E9DDCC;
    --c-text-suau: #B8A693;
    --c-accent: #D4914F;
    --c-sobre-accent: #211915;
    --c-accent-text: #E2A266;
    --c-accent-suau: #5A3D24;
    --c-focus: #8FB8BE;
    --logo-cantell: #8C5426;
    --logo-punt: #120C09;
    --c-exit: #A6DAB0;
    --c-exit-fons: #3C5240;
    --c-avis: #DAC883;
    --c-avis-fons: #5A4C14;
    --c-error: #F98E92;
    --c-error-fons: #522D2E;
    --c-info: #6EC7DC;
    --c-info-fons: #12444F;
    --ombra-zona: 0 0 0 1px var(--c-separador), 0 12px 34px -16px rgb(0 0 0 / 0.7);
    --ombra-tecla: 0 1px 0 rgb(0 0 0 / 0.35);
    color-scheme: dark;
  }
}

:root[data-tema="fosc"],
[data-tema="fosc"] {
  --c-fons: #211915;
  --c-fons-alt: #2A201B;
  --c-superficie: #2C221C;
  --c-superficie-alta: #382B23;
  --c-linia: #4A3B31;
  --c-separador: #64503F;
  --c-vora: #8E7967;
  --c-text: #E9DDCC;
  --c-text-suau: #B8A693;
  --c-accent: #D4914F;
  --c-sobre-accent: #211915;
  --c-accent-text: #E2A266;
  --c-accent-suau: #5A3D24;
  --c-focus: #8FB8BE;
  --logo-cantell: #8C5426;
  --logo-punt: #120C09;
  --c-exit: #A6DAB0;
  --c-exit-fons: #3C5240;
  --c-avis: #DAC883;
  --c-avis-fons: #5A4C14;
  --c-error: #F98E92;
  --c-error-fons: #522D2E;
  --c-info: #6EC7DC;
  --c-info-fons: #12444F;
  --ombra-zona: 0 0 0 1px var(--c-separador), 0 12px 34px -16px rgb(0 0 0 / 0.7);
  --ombra-tecla: 0 1px 0 rgb(0 0 0 / 0.35);
  color-scheme: dark;
}

/* =====================================================================
   Paleta per a daltonisme (substitueix només els estats)
   Èxit blau · avís groc · error magenta · informació turquesa.
   Van després dels temes perquè guanyin amb la mateixa especificitat.
   ===================================================================== */
[data-colors="daltonisme"],
[data-tema="clar"][data-colors="daltonisme"] {
  --c-exit: #143F80;
  --c-exit-fons: #9BB9E8;
  --c-avis: #534904;
  --c-avis-fons: #D2C990;
  --c-error: #741F3C;
  --c-error-fons: #E1A4B2;
  --c-info: #136363;
  --c-info-fons: #9BE8E7;
}

@media (prefers-color-scheme: dark) {
  :root[data-colors="daltonisme"]:not([data-tema="clar"]) {
    --c-exit: #87AFED;
    --c-exit-fons: #203351;
    --c-avis: #E5CA80;
    --c-avis-fons: #5A4C24;
    --c-error: #E493A7;
    --c-error-fons: #4C252F;
    --c-info: #6FDBDB;
    --c-info-fons: #1C5757;
  }
}

:root[data-tema="fosc"][data-colors="daltonisme"],
[data-tema="fosc"][data-colors="daltonisme"] {
  --c-exit: #87AFED;
  --c-exit-fons: #203351;
  --c-avis: #E5CA80;
  --c-avis-fons: #5A4C24;
  --c-error: #E493A7;
  --c-error-fons: #4C252F;
  --c-info: #6FDBDB;
  --c-info-fons: #1C5757;
}