/* ==========================================================================
   VARIABLES.CSS — Sagra San Giuseppe
   Design tokens and CSS custom properties for the entire design system.
   All values are defined here for easy theming and consistency.
   ========================================================================== */

:root {

  /* ========================================================================
     COLORS
     ======================================================================== */

  /* Primary — Teal Scuro (dalla locandina 2026) */
  --color-primary:        #035158;
  --color-primary-dark:   #022D31;
  --color-primary-light:  #34726B;
  --color-primary-pale:   #C5DDD9;

  /* Secondary — Crema Caldo */
  --color-secondary:       #FBF5E6;
  --color-secondary-dark:  #E8DCC4;
  --color-secondary-light: #FDF9F0;
  --color-secondary-pale:  #FEFCF7;

  /* Accent — Oro / Ambra */
  --color-accent:       #D4A030;
  --color-accent-dark:  #B8872A;
  --color-accent-light: #E8C466;

  /* Fiori — Accenti dalla locandina */
  --color-flower-coral:    #E06B6B;
  --color-flower-pink:     #D4708F;
  --color-flower-yellow:   #F0C850;
  --color-flower-lavender: #9B8EC4;
  --color-flower-cream:    #F5E6C8;

  /* Neutrals */
  --color-petal:       #F5EFE0;
  --color-cream:       #FBF5E6;
  --color-warm-white:  #FEFAF0;
  --color-bark:        #3D3028;
  --color-soil:        #0A2A2E;
  --color-white:       #FFFFFF;
  --color-black:       #1A1510;

  /* Functional */
  --color-success:  #34726B;
  --color-warning:  #D4A030;
  --color-error:    #C4504A;
  --color-info:     #5B8FB9;

  /* ========================================================================
     GRADIENTS
     ======================================================================== */
  --gradient-hero: linear-gradient(160deg,
    #022D31 0%,
    #035158 40%,
    #34726B 100%
  );

  --gradient-hero-overlay: linear-gradient(180deg,
    rgba(2, 45, 49, 0.7) 0%,
    rgba(3, 81, 88, 0.4) 40%,
    rgba(2, 45, 49, 0.75) 100%
  );

  --gradient-card: linear-gradient(180deg,
    var(--color-warm-white) 0%,
    var(--color-petal) 100%
  );

  --gradient-primary: linear-gradient(135deg,
    var(--color-primary) 0%,
    var(--color-primary-dark) 100%
  );

  --gradient-secondary: linear-gradient(135deg,
    var(--color-accent) 0%,
    var(--color-accent-dark) 100%
  );

  --gradient-accent: linear-gradient(135deg,
    var(--color-flower-coral) 0%,
    var(--color-flower-pink) 100%
  );

  /* ========================================================================
     TYPOGRAPHY
     ======================================================================== */

  /* Font families */
  --font-display: 'Bobby Jones Soft', Impact, "Arial Black", sans-serif;
  --font-body:    'Telegraf', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;

  /* Type scale — fluid clamp() sizing */
  --text-xs:    clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem);      /* ~11-12px */
  --text-sm:    clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);     /* ~13-14px */
  --text-base:  clamp(0.9375rem, 0.9rem + 0.18vw, 1rem);          /* ~15-16px */
  --text-md:    clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);        /* ~17-18px */
  --text-lg:    clamp(1.125rem, 1rem + 0.5vw, 1.375rem);          /* ~18-22px */
  --text-xl:    clamp(1.375rem, 1.15rem + 0.85vw, 1.75rem);       /* ~22-28px */
  --text-2xl:   clamp(1.75rem, 1.45rem + 1.2vw, 2.25rem);         /* ~28-36px */
  --text-3xl:   clamp(2rem, 1.6rem + 1.6vw, 2.75rem);             /* ~32-44px */
  --text-4xl:   clamp(2.75rem, 2rem + 3vw, 4rem);                 /* ~44-64px */
  --text-hero:  clamp(3rem, 2rem + 4vw, 5.5rem);                  /* ~48-88px */

  /* Line heights */
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.6;
  --leading-relaxed: 1.8;

  /* Font weights */
  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;

  /* Letter spacing */
  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.02em;
  --tracking-wider:    0.05em;
  --tracking-widest:   0.1em;

  /* ========================================================================
     SPACING SCALE
     ======================================================================== */
  --space-xs:       0.25rem;   /*  4px */
  --space-sm:       0.5rem;    /*  8px */
  --space-md:       1rem;      /* 16px */
  --space-lg:       1.5rem;    /* 24px */
  --space-xl:       2rem;      /* 32px */
  --space-2xl:      3rem;      /* 48px */
  --space-3xl:      4rem;      /* 64px */
  --space-4xl:      6rem;      /* 96px */
  --space-section:  clamp(3rem, 2rem + 4vw, 6rem);

  /* ========================================================================
     CONTAINERS
     ======================================================================== */
  --container-narrow:  800px;
  --container-default: 1200px;
  --container-wide:    1400px;
  --container-padding: clamp(1rem, 0.5rem + 2vw, 2rem);

  /* ========================================================================
     BORDER RADIUS
     ======================================================================== */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill:  9999px;

  /* ========================================================================
     TRANSITIONS
     ======================================================================== */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-smooth: 500ms cubic-bezier(0.25, 0.1, 0.25, 1);

  /* ========================================================================
     SHADOWS
     ======================================================================== */
  --shadow-xs:    0 1px 2px rgba(3, 81, 88, 0.06);
  --shadow-sm:    0 2px 4px rgba(3, 81, 88, 0.08);
  --shadow-md:    0 4px 12px rgba(3, 81, 88, 0.1);
  --shadow-lg:    0 8px 24px rgba(3, 81, 88, 0.12);
  --shadow-xl:    0 16px 48px rgba(3, 81, 88, 0.14);
  --shadow-glow:  0 0 20px rgba(3, 81, 88, 0.2);
  --shadow-card:  0 2px 8px rgba(3, 81, 88, 0.06),
                  0 8px 24px rgba(3, 81, 88, 0.08);
  --shadow-card-hover: 0 4px 12px rgba(3, 81, 88, 0.08),
                       0 16px 40px rgba(3, 81, 88, 0.12);

  /* ========================================================================
     Z-INDEX SCALE
     ======================================================================== */
  --z-behind:     -1;
  --z-base:        0;
  --z-above:       1;
  --z-dropdown:   10;
  --z-sticky:     20;
  --z-fixed:      30;
  --z-header:     40;
  --z-overlay:    50;
  --z-modal:      60;
  --z-toast:      70;
  --z-loader:     100;

  /* ========================================================================
     OVERLAYS
     ======================================================================== */
  --overlay-light: rgba(254, 250, 240, 0.85);
  --overlay-dark:  rgba(3, 81, 88, 0.6);
  --overlay-soil:  rgba(3, 81, 88, 0.8);
}