/* ===============================
   VARIABLES — Global Design System
   =============================== */

:root {

  /* --- FONT FAMILY --- */
  --font-family: 'Poppins', sans-serif;

  /* --- FONT WEIGHTS --- */
  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* --- DISTANZA TRA LE LETTERE --- */
  --letter-tight: -0.25px;   /* leggero */
  --letter-tighter: -0.5px;  /* più evidente */

  /* Line height */ 
  --line-height-default: 1.5; 
  --line-height-relaxed: 1.7;

  /* --- COLOR PALETTE --- */

  /* Neutrals */
  --white: hsl(0, 0%, 100%);
  --black: hsl(0, 0%, 0%);

  /* Grigi */
  --grey-50: hsl(0, 0%, 98%);
  --grey-100: hsl(214, 17%, 92%);
  --grey-300: hsl(0, 0%, 70%);
  --grey-500: hsl(217, 19%, 35%);
  --grey-700: hsl(219, 29%, 14%);

  /* Font sizes (fluidi) */ 
  --fs-xxs: clamp(0.6rem, 0.6vw, 0.4rem);
  --fs-xs: clamp(0.7rem, 0.8vw, 0.8rem); 
  --fs-sm: clamp(0.8rem, 1vw, 0.9rem); 
  --fs-md: clamp(0.9rem, 1.2vw, 1rem); 
  --fs-lg: clamp(1.2rem, 2vw, 1.6rem); 
  --fs-xl: clamp(1.6rem, 3vw, 2.2rem);
  --fs-xxl: clamp(2.5rem, 1vw, 5rem);
  --fs-xxl: clamp(2rem, 4vw, 2.8rem);
  --fs-xxxl: clamp(2.6rem, 5.5vw, 3.6rem);


  /* Accenti */
  --orange: hsl(39, 100%, 50%);
  --darkslategray: hsl(180, 25%, 25%);
  --byakuroku: hsl(105, 40%, 84%);
  --moegi: hsl(101, 49%, 51%);
  --wakatake-iro: hsl(155, 100%, 32%);
  --tokiwa-iro: hsl(156, 100%, 14%);

  /* xue kitchen colors */
  --color-cotto: hsl(14, 55%, 45%);      /* Terracotta caldo e opaco — Warm matte terracotta */
  --color-cotto-rgb: 163, 84, 56;
  --color-lavagna: hsl(210, 10%, 15%);   /* Grigio ardesia profondo — Deep slate gray */
  --color-lavagna-rgb: 33, 38, 41;
  --color-milk: hsl(40, 20%, 92%); /* Neutral milky white, very light, with a soft warm undertone */
  --color-milk-rgb: 238, 232, 220;
  --color-linen: hsl(38, 22%, 88%); /* Warm opaque linen tone, very light, 
  with a creamy and natural undertone. It resembles softly lit linen fabric, 
  with a velvety, uniform, and matte appearance. */
  --color-linen-rgb: 232, 220, 200;

  /* Colore principale — Main color */
  --painted-weave: hsl(35, 18%, 78%); /* Tonalità neutra e opaca ispirata alla trama pittorica intrecciata */
  --painted-weave-rgb: 210, 198, 180; /* Neutral matte tone inspired by the painted weave texture */

  --color-weave:hsl(42, 12%, 85%);
  --color-weave-rgb: rgb(222, 218, 210); /*light warm gray */

  /* pimentel fonseca kitchen */
  --color-fresh-sky: hsl(200,100%,49%);
  --color-steel-blue: hsl(202,95%,41%);
  --color-baltic-blue: hsl(199,100%,29%);
  --color-deep-space-blue: hsl(202,100%,16%);
  --color-ink-black: hsl(200,75%,8%);
  --color-golden-bronze: hsl(43,59%,52%);
  --color-copperwood: hsl(34,100%,37%);
  --color-chocolate-brown: hsl(31,100%,29%);
  --color-gunmetal: hsl(285,3%,27%);
  

  /* --- SPACING SYSTEM --- */
  --space-xxs: 0.25rem; 
  --space-xs: 0.5rem; 
  --space-sm: 0.75rem; 
  --space-md: 1rem; 
  --space-lg: 1.5rem; 
  --space-xl: 2rem; 
  --space-xxl: 3rem;
  --space-xxxl: 4rem;
  --space-4xl: 6rem;

  /* --- BORDER RADIUS --- */
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 12px;
  --radius-xl: 20px;

  /* --- SHADOWS --- */
  --shadow-soft: 0 2px 6px rgba(var(--black-rgb), 0.12);
  --shadow-medium: 4px 4px 10px rgba(var(--black-rgb), 0.15);
  --shadow-strong: 6px 6px 18px rgba(var(--black-rgb), 0.2);

}