/* =====================================================================
   Factura Con Cabeza · Design Tokens
   Família "con cabeza" (germà de RCC): crema editorial + serif/sans.
   Accent propi: petroli fiscal (marca) + terracota compartit (acció).
   Font de veritat: brand/design-prompt.md. No escriure hex solts als
   components: usar var(--fcc-*).
   ===================================================================== */

:root {
  /* ---- Color · marca (petroli fiscal: estructura, confiança, dates) ---- */
  --fcc-petrol:        #1F5A66;
  --fcc-petrol-dark:   #17444E;  /* hover, footer */
  --fcc-petrol-tint:   #E6EFF1;  /* superfícies suaus, badges */
  --fcc-petrol-line:   #C9DDE1;  /* vores sobre tint */

  /* ---- Color · acció i veu humana (terracota, signatura de família) ---- */
  --fcc-terracota:      #C25A33;  /* CTA primari, "cabeza" del wordmark */
  --fcc-terracota-dark: #A6492A;
  --fcc-terracota-tint: #F6E8E0;
  --fcc-terracota-line: #E6CDBE;

  /* ---- Color · neutres càlids (mai grisos clínics) ---- */
  --fcc-cream:         #FBF7F0;  /* fons de pàgina */
  --fcc-cream-2:       #F4F1EA;  /* superfície càlida alternativa */
  --fcc-surface:       #FEFDFB;  /* cards, inputs (blanc càlid, mai #FFF clínic) */
  --fcc-ink:           #1E2A2C;  /* text principal */
  --fcc-ink-soft:      #5A6B6D;  /* text secundari */
  --fcc-ink-faint:     #64777A;  /* etiquetes, metadades (AA sobre crema) */
  --fcc-line:          #E6E0D4;  /* vores i separadors */
  --fcc-line-soft:     #F0EDE3;

  /* ---- Color · estats ---- */
  --fcc-gold:          #B0822E;  /* xifres/dates grans, vora de chips. Mai text petit */
  --fcc-ok:            #2E7D52;  /* "no te afecta / exento" */
  --fcc-ok-tint:       #E4F0E9;
  --fcc-ok-line:       #B7D8C6;
  --fcc-warn-bg:       #FBF1DE;  /* estat "depende" */
  --fcc-warn-line:     #ECD9AE;
  --fcc-warn-ink:      #7A5618;
  --fcc-alert:         #B23B2E;  /* sanció, "te afecta ya" (terrós, no error de sistema) */

  /* ---- Color · sobre fons fosc (footer petroli) ---- */
  --fcc-ondark-ink:    #B9CDD1;  /* text secundari sobre petrol-dark */
  --fcc-ondark-faint:  #9CB6BB;  /* metadades, disclaimer */
  --fcc-ondark-label:  #8FAAB0;  /* etiquetes uppercase */
  --fcc-ondark-line:   #2C5A63;  /* separadors */

  /* ---- Focus ---- */
  --fcc-focus-ring:    rgba(31, 90, 102, .28);  /* anell visible sobre surface */
  --fcc-ring-select:   rgba(31, 90, 102, .18);  /* anell d'opcio seleccionada (checker) */

  /* ---- Moviment (corbes propies + durades, mai defaults del navegador) ---- */
  --fcc-ease-smooth:  cubic-bezier(.22, 1, .36, 1);
  --fcc-ease-out:     cubic-bezier(.17, 1, .32, 1);
  --fcc-ease-spring:  cubic-bezier(.34, 1.56, .64, 1);  /* nomes revelats/dot, mai estats UI plans */
  --fcc-ease-in-out:  cubic-bezier(.66, 0, .34, 1);
  --fcc-dur-fast:     150ms;
  --fcc-dur-normal:   220ms;
  --fcc-dur-slow:     320ms;

  /* ---- Tipografia ---- */
  --fcc-font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --fcc-font-body:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fcc-fs-h1:   clamp(2rem, 1.4rem + 2.6vw, 3.375rem); /* 32 a 54 */
  --fcc-fs-h2:   clamp(1.5rem, 1.2rem + 1.2vw, 1.75rem);
  --fcc-fs-h3:   1.25rem;
  --fcc-fs-lead: 1.125rem;
  --fcc-fs-body: 1rem;
  --fcc-fs-sm:   0.875rem;
  --fcc-fs-xs:   0.8125rem;

  --fcc-lh-tight: 1.1;
  --fcc-lh-head:  1.15;
  --fcc-lh-body:  1.6;

  /* ---- Espai (base 4) ---- */
  --fcc-sp-1: 4px;
  --fcc-sp-2: 8px;
  --fcc-sp-3: 12px;
  --fcc-sp-4: 16px;
  --fcc-sp-5: 24px;
  --fcc-sp-6: 32px;
  --fcc-sp-7: 48px;
  --fcc-sp-8: 64px;

  /* ---- Radis ---- */
  --fcc-r-sm: 8px;
  --fcc-r-md: 10px;
  --fcc-r-lg: 14px;
  --fcc-r-xl: 18px;
  --fcc-r-pill: 999px;

  /* ---- Ombres (suaus, càlides) ---- */
  --fcc-shadow-sm: 0 6px 14px rgba(194,90,51,.16);   /* botó terracota */
  --fcc-shadow-md: 0 10px 24px rgba(30,42,44,.08);
  --fcc-shadow-lg: 0 20px 50px rgba(30,42,44,.10);

  /* ---- Ombres en capes (anell fi + contacte + ambient, 2-10%) ---- */
  --fcc-shadow-card: 0 1px 2px rgba(30,42,44,.05), 0 2px 6px rgba(30,42,44,.03), 0 0 0 .5px rgba(30,42,44,.07);
  --fcc-shadow-lift: 0 4px 10px rgba(30,42,44,.04), 0 12px 24px rgba(30,42,44,.05), 0 2px 4px rgba(30,42,44,.03), 0 0 0 .5px rgba(30,42,44,.10);

  --fcc-maxw: 1200px;
  --fcc-maxw-prose: 65ch;
}