/* ============================================================================
   tokens.css — Identitat visual de la Guia SA 0-3
   ----------------------------------------------------------------------------
   «Un producte digital professional amb ànima d'escola bressol.»

   Sobre la paleta: els set colors de la identitat (sàlvia, verd suau, groc
   mantega, préssec, blau cel, lila i crema) són colors de SUPERFÍCIE i
   d'IL·LUSTRACIÓ. Cap no arriba a 4,5:1 sobre el crema, de manera que cap no pot
   sostenir text petit. Per això cada secció té un tríade de la mateixa família:
   un to clar per a fons, un de mitjà per a formes i un de profund per a text.
   Mateixa temperatura, mateixa personalitat, però llegible.

   Cap color no es defineix mai només dins d'un media query: :root porta la paleta
   clara sencera i els blocs foscos només en redefineixen els valors.
   ========================================================================== */

:root {
  /* --- Superfícies i text -------------------------------------------------- */
  --fons:          #FFF9F0;   /* crema */
  --fons-alt:      #FBF2E4;
  --superficie:    #FFFFFF;
  --superficie-2:  #FDF7EC;
  --text:          #30332F;   /* 12,3:1 sobre crema */
  --text-suau:     #4A4F48;   /* 8,0:1 */
  --text-tenue:    #63685F;   /* 4,8:1 sobre el vel més clar de targeta; 5,4:1 sobre crema.
                                 Calculat contra els fons TENYITS, no contra el crema pur:
                                 sobre el vel verd, un to més clar es quedava a 4,17:1. */
  --linia:         #EFE4D3;
  --linia-forta:   #DFD1B9;

  /* --- Tríades de secció ---------------------------------------------------
     fons = el to de la identitat · forma = to mitjà · text = to profund AA      */
  --verd-fons:      #A8C5A8;  --verd:      #6F9278;  --verd-text:      #3F5E48;  /* 6,9:1 */
  --mel-fons:       #F4D77A;  --mel:       #D9A93E;  --mel-text:       #8A6520;  /* 5,2:1 */
  --blau-fons:      #9CC9D8;  --blau:      #5E9CB3;  --blau-text:      #2F5F72;  /* 6,7:1 */
  --pressec-fons:   #F3B39B;  --pressec:   #E08A6B;  --pressec-text:   #A64B34;  /* 5,5:1 */
  --lila-fons:      #C9B8D9;  --lila:      #A88DC2;  --lila-text:      #5F4A75;

  /* Versions molt diluïdes per a fons de targeta: el to de la identitat sobre
     crema, prou suau perquè el text negre hi continuï tenint 11:1 o més.        */
  --verd-vel:     #E7F0E6;
  --mel-vel:      #FBF0D4;
  --blau-vel:     #E4F1F5;
  --pressec-vel:  #FBEAE2;
  --lila-vel:     #F0EAF6;

  /* --- Paleta d'il·lustració ------------------------------------------------
     Les il·lustracions són SVG en línia i pinten amb aquestes variables, de
     manera que es retonen soles quan canvia el tema.                            */
  --il-verd:        #6F9278;
  --il-verd-clar:   #A8C5A8;
  --il-mel:         #F4D77A;
  --il-mel-fosc:    #D9A93E;
  --il-pressec:     #F3B39B;
  --il-pressec-fosc:#E08A6B;
  --il-blau:        #9CC9D8;
  --il-blau-fosc:   #5E9CB3;
  --il-lila:        #C9B8D9;
  --il-fusta:       #DDB98F;
  --il-fusta-fosc:  #B48A5C;
  --il-terra:       #F0E2CC;
  --il-figura-a:    #E8C4A8;
  --il-figura-b:    #C08A62;
  --il-cabell-a:    #6B4A38;
  --il-cabell-b:    #3E3B36;

  /* --- Gra ------------------------------------------------------------------
     Textura molt subtil perquè el crema no sembli plàstic. Va incrustada:
     cap petició de xarxa, funciona des de file://.                              */
  --gra: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='0.055'/%3E%3C/svg%3E");

  /* --- Ombres ---------------------------------------------------------------
     Molt subtils i càlides: cap ombra grisa.                                    */
  --ombra-1: 0 1px 2px rgba(72, 56, 34, .04), 0 6px 16px -10px rgba(72, 56, 34, .14);
  --ombra-2: 0 2px 6px rgba(72, 56, 34, .06), 0 20px 40px -24px rgba(72, 56, 34, .28);

  /* --- Tipografia -----------------------------------------------------------
     Una sola família, jerarquia feta amb pesos. Nunito: arrodonida, amable i
     amb una x molt alta, que és el que la fa professional i no de joguina.      */
  --lletra: "Nunito", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;

  --mida-xs:  0.78rem;
  --mida-s:   0.9rem;
  --mida-m:   1rem;
  --mida-l:   1.1rem;
  --mida-xl:  clamp(1.25rem, 1.05rem + .8vw, 1.5rem);
  --mida-2xl: clamp(1.6rem, 1.25rem + 1.6vw, 2.15rem);
  --mida-3xl: clamp(2rem, 1.45rem + 2.6vw, 3.1rem);

  /* --- Espais i geometria ---------------------------------------------------- */
  --e-1: .25rem;  --e-2: .5rem;   --e-3: .75rem;  --e-4: 1rem;
  --e-5: 1.5rem;  --e-6: 2rem;    --e-7: 3rem;    --e-8: 4.5rem;

  --radi-s: 10px;
  --radi-m: 18px;
  --radi-l: 28px;
  --radi-ple: 999px;
  /* Cantonada asimètrica de les targetes: la forma respira i deixa de ser caixa. */
  --radi-organic: 40px 28px 32px 28px;

  --amplada: 74rem;
  --mesura: 34rem;
  --area-tactil: 44px;
}

/* --- Tema fosc: terra torrada, no gris ---------------------------------------
   Els tons de secció intercanvien papers: el to clar de la identitat passa a ser
   el color del text, i el fons passa a ser una versió profunda del mateix to.   */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="clar"]) {
    --fons:          #1E1B16;
    --fons-alt:      #262218;
    --superficie:    #2B2720;
    --superficie-2:  #332E25;
    --text:          #F6EFE2;
    --text-suau:     #CFC6B6;
    --text-tenue:    #9C9384;
    --linia:         #3A342A;
    --linia-forta:   #4C4536;

    --verd-fons:    #26372B;  --verd:    #6F9278;  --verd-text:    #A8C5A8;  /* 9,2:1 */
    --mel-fons:     #3A2F16;  --mel:     #D9A93E;  --mel-text:     #F4D77A;  /* 12,2:1 */
    --blau-fons:    #1E323B;  --blau:    #5E9CB3;  --blau-text:    #9CC9D8;  /* 9,6:1 */
    --pressec-fons: #3B241A;  --pressec: #E08A6B;  --pressec-text: #F3B39B;  /* 9,6:1 */
    --lila-fons:    #2E2739;  --lila:    #A88DC2;  --lila-text:    #C9B8D9;

    --verd-vel:     #232E24;
    --mel-vel:      #2F2717;
    --blau-vel:     #1F2B31;
    --pressec-vel:  #33221A;
    --lila-vel:     #2A2432;

    --il-verd:        #6F9278;
    --il-verd-clar:   #8FB294;
    --il-mel:         #D9BE6A;
    --il-mel-fosc:    #B98F32;
    --il-pressec:     #D89A83;
    --il-pressec-fosc:#BE7157;
    --il-blau:        #7FAABA;
    --il-blau-fosc:   #4C8195;
    --il-lila:        #A897B8;
    --il-fusta:       #B08A5E;
    --il-fusta-fosc:  #8C6B45;
    --il-terra:       #332C23;
    --il-figura-a:    #C9A188;
    --il-figura-b:    #A0714F;
    --il-cabell-a:    #4E372A;
    --il-cabell-b:    #2A2724;

    --gra: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='0.08'/%3E%3C/svg%3E");

    --ombra-1: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 16px -10px rgba(0, 0, 0, .6);
    --ombra-2: 0 2px 6px rgba(0, 0, 0, .4), 0 20px 40px -24px rgba(0, 0, 0, .75);
  }
}

:root[data-tema="fosc"] {
  --fons:          #1E1B16;
  --fons-alt:      #262218;
  --superficie:    #2B2720;
  --superficie-2:  #332E25;
  --text:          #F6EFE2;
  --text-suau:     #CFC6B6;
  --text-tenue:    #9C9384;
  --linia:         #3A342A;
  --linia-forta:   #4C4536;

  --verd-fons:    #26372B;  --verd:    #6F9278;  --verd-text:    #A8C5A8;
  --mel-fons:     #3A2F16;  --mel:     #D9A93E;  --mel-text:     #F4D77A;
  --blau-fons:    #1E323B;  --blau:    #5E9CB3;  --blau-text:    #9CC9D8;
  --pressec-fons: #3B241A;  --pressec: #E08A6B;  --pressec-text: #F3B39B;
  --lila-fons:    #2E2739;  --lila:    #A88DC2;  --lila-text:    #C9B8D9;

  --verd-vel:     #232E24;
  --mel-vel:      #2F2717;
  --blau-vel:     #1F2B31;
  --pressec-vel:  #33221A;
  --lila-vel:     #2A2432;

  --il-verd:        #6F9278;
  --il-verd-clar:   #8FB294;
  --il-mel:         #D9BE6A;
  --il-mel-fosc:    #B98F32;
  --il-pressec:     #D89A83;
  --il-pressec-fosc:#BE7157;
  --il-blau:        #7FAABA;
  --il-blau-fosc:   #4C8195;
  --il-lila:        #A897B8;
  --il-fusta:       #B08A5E;
  --il-fusta-fosc:  #8C6B45;
  --il-terra:       #332C23;
  --il-figura-a:    #C9A188;
  --il-figura-b:    #A0714F;
  --il-cabell-a:    #4E372A;
  --il-cabell-b:    #2A2724;

  --gra: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='0.08'/%3E%3C/svg%3E");

  --ombra-1: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 16px -10px rgba(0, 0, 0, .6);
  --ombra-2: 0 2px 6px rgba(0, 0, 0, .4), 0 20px 40px -24px rgba(0, 0, 0, .75);
}