/* ==========================================================
   LA PAGESETA · Variables de disseny
   ----------------------------------------------------------
   Tots els colors, ombres, fonts i mides surten d'aquí.
   Quan arribi el logo, només caldrà retocar aquest fitxer.
   ========================================================== */

:root {
  /* ---- Fusta (noguera fosca) ---- */
  --fusta-fosca: #2a190f;
  --fusta: #45291a;
  --fusta-mitja: #6b4128;
  --fusta-clara: #946240;

  /* ---- Fons i paper ---- */
  --fons: #f3ede3;
  --paper: #fbf8f2;
  --linia: #dccfbd;

  /* ---- Text ---- */
  --tinta: #2b1d14;
  --tinta-suau: #6a5848;
  --text-sobre-fusta: #f2e6d3;
  --text-sobre-fusta-suau: #c8ad8b;

  /* ---- Accent (terra cuita fosca) ---- */
  --accent: #8a3f1f;
  --accent-clar: #c0744a;

  /* ---- Estats ---- */
  --exit: #4f6a2c;
  --exit-fons: #e6ebd6;
  --error: #a2311b;
  --error-fons: #f6e1d9;

  /* ---- Llums i ombres ---- */
  --ombra-suau: rgba(40, 20, 8, .12);
  --ombra: rgba(40, 20, 8, .30);
  --ombra-forta: rgba(20, 10, 4, .45);
  --llum-fusta: rgba(255, 228, 196, .28);
  --llum-fusta-suau: rgba(255, 228, 196, .12);
  --fosc-fusta: rgba(0, 0, 0, .40);

  /* Vel fosc sobre la foto de portada perquè el text es llegeixi */
  --vel-portada: linear-gradient(90deg,
      rgba(42, 25, 15, .90) 0%,
      rgba(42, 25, 15, .66) 40%,
      rgba(42, 25, 15, .18) 75%,
      rgba(42, 25, 15, 0) 100%);

  /* Al mòbil el text ocupa tota l'amplada: vel vertical */
  --vel-portada-mobil: linear-gradient(180deg,
      rgba(42, 25, 15, .55) 0%,
      rgba(42, 25, 15, .85) 100%);

  /* ---- Tipografia ---- */
  --font-titol: "Marcellus", "Trajan Pro", Georgia, serif;
  --font-text: "Mulish", "Segoe UI", Tahoma, sans-serif;

  /* ---- Mides ---- */
  --amplada-max: 1200px;
  --alcada-capcalera: 78px;
  --radi: 3px;

  /* ---- Textura de veta de fusta (es posa sobre un color base) ---- */
  --veta:
    repeating-linear-gradient(179.2deg, rgba(0, 0, 0, .12) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(180.9deg, rgba(255, 228, 196, .035) 0 2px, transparent 2px 13px),
    repeating-linear-gradient(178.5deg, rgba(0, 0, 0, .09) 0 3px, transparent 3px 37px),
    radial-gradient(ellipse 55% 160% at 28% 50%, rgba(255, 215, 170, .07), transparent 70%),
    radial-gradient(ellipse 40% 120% at 78% 40%, rgba(0, 0, 0, .10), transparent 70%);
}