/* ============================================================
   SB Child - tokens.css
   Design system condiviso: tipografia, scala colori (riferimenti),
   spacing, effects + mappatura ai token Bootstrap 5.

   Questo file è IDENTICO nei due siti (Borghi e Fattorie).
   Gli alias semantici dominanti (primary/accent) stanno in brand.css.

   SOLO versione LIGHT — nessun token dark-mode.
   ============================================================ */


/* ── TIPOGRAFIA ─────────────────────────────────────────── */

:root {
  /* Font families — ufficiali del brand */
  --font-display: 'Big Caslon CC', Georgia, 'Book Antiqua', serif;
  --font-serif:   'Source Sans Pro', system-ui, -apple-system, sans-serif;
  --font-body:    'Source Sans Pro', system-ui, -apple-system, sans-serif;
  --font-sans:    'Source Sans Pro', system-ui, -apple-system, sans-serif;
  --font-mono:    'Courier New', Courier, monospace;

  /* Type scale (fluid-ready rem values) */
  --text-2xs:   0.625rem;   /*  10px */
  --text-xs:    0.75rem;    /*  12px */
  --text-sm:    0.875rem;   /*  14px */
  --text-base:  1rem;       /*  16px */
  --text-lg:    1.125rem;   /*  18px */
  --text-xl:    1.25rem;    /*  20px */
  --text-2xl:   1.5rem;     /*  24px */
  --text-3xl:   1.875rem;   /*  30px */
  --text-4xl:   2.25rem;    /*  36px */
  --text-5xl:   3rem;       /*  48px */
  --text-6xl:   3.75rem;    /*  60px */
  --text-7xl:   4.5rem;     /*  72px */
  --text-8xl:   6rem;       /*  96px */

  /* Line heights */
  --leading-none:    1;
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   1.8;

  /* Letter spacing */
  --tracking-tighter: -0.04em;
  --tracking-tight:   -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.08em;
  --tracking-widest:   0.16em;

  /* Font weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900; /* Big Caslon CC Black */

  /* Ruoli tipografici semantici */
  --type-display-font:     var(--font-display);
  --type-display-weight:   var(--weight-regular);
  --type-display-leading:  var(--leading-tight);
  --type-display-tracking: var(--tracking-tight);

  --type-heading-font:    var(--font-display);
  --type-heading-weight:  var(--weight-regular);
  --type-heading-leading: var(--leading-snug);

  --type-subheading-font:     var(--font-sans);
  --type-subheading-weight:   var(--weight-semibold);
  --type-subheading-tracking: var(--tracking-wider);

  --type-body-font:    var(--font-body);
  --type-body-weight:  var(--weight-regular);
  --type-body-leading: var(--leading-relaxed);

  --type-ui-font:    var(--font-sans);
  --type-ui-weight:  var(--weight-regular);
  --type-ui-leading: var(--leading-normal);

  --type-label-font:      var(--font-sans);
  --type-label-weight:    var(--weight-semibold);
  --type-label-tracking:  var(--tracking-wider);
  --type-label-transform: uppercase;

  --type-caption-font: var(--font-sans);
  --type-caption-size: var(--text-xs);
}


/* ── SCALA COLORI (riferimenti grezzi) ──────────────────── */
/*
   Questi token sono IDENTICI nei due siti.
   Gli alias semantici (--color-primary, --color-action, ecc.)
   si trovano in brand.css e variano per sito.
*/

:root {
  /* Bianco istituzionale — comune ad entrambi i marchi */
  --color-white: #FFFFFF;

  /* Near-black, warm undertone */
  --color-charcoal: #1C1410;

  /* ── Scala bordeaux  (base: Pantone 2350 C = #AF231C) ── */
  --color-bordeaux-50:  #FEF4F3;
  --color-bordeaux-100: #FBD9D7;
  --color-bordeaux-200: #F4ABA7;
  --color-bordeaux-300: #E97470;
  --color-bordeaux-400: #D4433E;
  --color-bordeaux-500: #AF231C; /* Pantone 2350 C — bordeaux ufficiale */
  --color-bordeaux-600: #931D17;
  --color-bordeaux-700: #741613;
  --color-bordeaux-800: #550F0D;
  --color-bordeaux-900: #360908;

  /* ── Scala arancio  (base: Pantone 3514 C = #F1B300) ── */
  --color-arancio-50:  #FFFBEB;
  --color-arancio-100: #FFF2C2;
  --color-arancio-200: #FFE480;
  --color-arancio-300: #FFD33D;
  --color-arancio-400: #F9C418;
  --color-arancio-500: #F1B300; /* Pantone 3514 C — arancio ufficiale */
  --color-arancio-600: #CC9600;
  --color-arancio-700: #9A7100;
  --color-arancio-800: #6A4D00;
  --color-arancio-900: #3D2C00;

  /* ── Neutri caldi ── */
  --color-warm-50:  #FDFAF6;
  --color-warm-100: #F9F4EE;
  --color-warm-200: #F0E8D8;
  --color-warm-300: #E0D2BC;
  --color-warm-400: #CAB99E;
  --color-warm-500: #B09F84;
  --color-warm-600: #8A7D68;
  --color-warm-700: #6A5E4E;
  --color-warm-800: #4A4038;
  --color-warm-900: #2C2420;
  --color-warm-950: #1C1410;

  /* ── Accenti natura ── */
  --color-sage:       #5E7A4A;
  --color-sage-light: #C2D4B4;
  --color-terra:      #8A4E2C;
  --color-stone:      #C0B4A4;
}


/* ── SPACING ────────────────────────────────────────────── */

:root {
  /* Scala numerica (base 4px) */
  --space-0:   0;
  --space-px:  1px;
  --space-0-5: 0.125rem;   /*  2px */
  --space-1:   0.25rem;    /*  4px */
  --space-1-5: 0.375rem;   /*  6px */
  --space-2:   0.5rem;     /*  8px */
  --space-2-5: 0.625rem;   /* 10px */
  --space-3:   0.75rem;    /* 12px */
  --space-3-5: 0.875rem;   /* 14px */
  --space-4:   1rem;       /* 16px */
  --space-4-5: 1.125rem;   /* 18px */
  --space-5:   1.25rem;    /* 20px */
  --space-6:   1.5rem;     /* 24px */
  --space-7:   1.75rem;    /* 28px */
  --space-8:   2rem;       /* 32px */
  --space-9:   2.25rem;    /* 36px */
  --space-10:  2.5rem;     /* 40px */
  --space-11:  2.75rem;    /* 44px */
  --space-12:  3rem;       /* 48px */
  --space-13:  3.25rem;    /* 52px */
  --space-14:  3.5rem;     /* 56px */
  --space-15:  3.75rem;    /* 60px */
  --space-16:  4rem;       /* 64px */
  --space-20:  5rem;       /* 80px */
  --space-24:  6rem;       /* 96px */
  --space-28:  7rem;       /* 112px */
  --space-32:  8rem;       /* 128px */
  --space-40:  10rem;      /* 160px */
  --space-48:  12rem;      /* 192px */
  --space-56:  14rem;      /* 224px */
  --space-64:  16rem;      /* 256px */

  /* Alias semantici */
  --space-xs:  var(--space-2);    /*  8px */
  --space-sm:  var(--space-4);    /* 16px */
  --space-md:  var(--space-6);    /* 24px */
  --space-lg:  var(--space-8);    /* 32px */
  --space-xl:  var(--space-12);   /* 48px */
  --space-2xl: var(--space-16);   /* 64px */
  --space-3xl: var(--space-24);   /* 96px */
  --space-4xl: var(--space-32);   /* 128px */

  /* Layout */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;

  --section-gap:   var(--space-24);   /* 96px tra sezioni */
  --content-gap:   var(--space-16);   /* 64px tra blocchi contenuto */
  --card-gap:      var(--space-6);    /* 24px tra card */
  --inline-gap:    var(--space-4);    /* 16px tra elementi inline */

  --page-padding-x: var(--space-8);   /* 32px padding laterale */
  --page-padding-y: var(--space-16);  /* 64px padding verticale */
}


/* ── EFFECTS ────────────────────────────────────────────── */

:root {
  /* Border radius */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-3xl:  32px;
  --radius-full: 9999px;

  /* Shadows (tonalità calde) */
  --shadow-xs:    0 1px 2px 0 oklch(20% 0.02 40 / 0.08);
  --shadow-sm:    0 2px 4px 0 oklch(20% 0.02 40 / 0.10),
                  0 1px 2px -1px oklch(20% 0.02 40 / 0.06);
  --shadow-md:    0 4px 12px -2px oklch(20% 0.02 40 / 0.12),
                  0 2px 6px -2px oklch(20% 0.02 40 / 0.08);
  --shadow-lg:    0 10px 24px -4px oklch(20% 0.02 40 / 0.14),
                  0 4px 10px -4px oklch(20% 0.02 40 / 0.10);
  --shadow-xl:    0 20px 48px -8px oklch(20% 0.02 40 / 0.16),
                  0 8px 20px -8px oklch(20% 0.02 40 / 0.10);
  --shadow-2xl:   0 32px 64px -12px oklch(20% 0.02 40 / 0.20);
  --shadow-inner: inset 0 2px 4px 0 oklch(20% 0.02 40 / 0.08);
  --shadow-none:  0 0 #0000;

  /* Borders */
  --border-width:   1px;
  --border-width-2: 2px;
  --border-style:   solid;
  --border-default: 1px solid var(--color-border);
  --border-subtle:  1px solid var(--color-border-subtle);
  --border-strong:  1.5px solid var(--color-border-strong);
  --border-action:  1.5px solid var(--color-action);
  --border-accent:  2px solid var(--color-accent);

  /* Transizioni */
  --duration-fast:   120ms;
  --duration-base:   200ms;
  --duration-slow:   350ms;
  --duration-slower: 500ms;

  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --transition-fast: var(--duration-fast) var(--ease-out);
  --transition-base: var(--duration-base) var(--ease-out);
  --transition-slow: var(--duration-slow) var(--ease-out);

  /* Z-index */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;

  /* Blur */
  --blur-sm: 4px;
  --blur-md: 8px;
  --blur-lg: 16px;
  --blur-xl: 32px;

  /* Opacity */
  --opacity-disabled: 0.45;
  --opacity-muted:    0.65;
  --opacity-hover:    0.88;
}


/* ── MAPPATURA BOOTSTRAP 5 ──────────────────────────────── */
/*
   Sovrascrive le variabili --bs-* di Bootstrap 5 con i valori del
   design system. I valori semantici arrivano da brand.css (caricato dopo).
   Questo blocco usa var() → si aggiorna automaticamente al cambio di brand.
*/

:root {
  /* Corpo testo */
  --bs-body-font-family: var(--font-body);
  --bs-body-font-size:   var(--text-base);
  --bs-body-line-height: var(--leading-relaxed);
  --bs-body-color:       var(--color-text);
  --bs-body-bg:          var(--color-bg);

  /* Headings */
  --bs-heading-color: var(--color-charcoal);

  /* Colore primario (Bootstrap lo usa per .btn-primary, .text-primary, ecc.) */
  --bs-primary:         var(--color-primary);
  --bs-primary-rgb:     var(--color-primary-rgb);

  /* Link */
  --bs-link-color:       var(--color-action);
  --bs-link-hover-color: var(--color-action-hover);

  /* Border radius (usato da card, bottoni, ecc.) */
  --bs-border-radius:    var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-border-radius-xl: var(--radius-xl);
  --bs-border-radius-pill: var(--radius-full);

  /* Border */
  --bs-border-color: var(--color-border);
  --bs-border-width: var(--border-width);

  /* Font mono */
  --bs-font-monospace: var(--font-mono);
}