/**
 * Mimmo Rotella Legacy - Typography & Color System (RESPONSIVE)
 * 
 * Global typography and color definitions used throughout the website.
 * Mobile-first responsive design with breakpoints at 768px (tablet) and 1024px (desktop).
 * 
 * This file provides:
 * - Custom FK Grotesk Neue font-face declarations (loaded from ../fonts/)
 * - Responsive typographic scale (Headlines, Body sizes, weights, italics)
 * - CSS variables for the complete brand color palette
 * - Responsive layout tokens (columns, margins, spaces, gutters, opacity)
 * - Utility classes for text/background colors and responsive spacing
 * 
 * Designed to match the visual identity of the Mimmo Rotella Legacy website,
 * following the official design system specifications.
 */

/* ------------------------------------------------------------------
   FONT IMPORT
   (correct relative paths: typography.css → ../fonts/)
------------------------------------------------------------------ */

@font-face {
    font-family: "FK Grotesk Neue";
    src: url("../fonts/FKGroteskNeue-Regular.woff2") format("woff2"),
         url("../fonts/FKGroteskNeue-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
  }
  
  @font-face {
    font-family: "FK Grotesk Neue";
    src: url("../fonts/FKGroteskNeue-Italic.woff2") format("woff2"),
         url("../fonts/FKGroteskNeue-Italic.woff") format("woff");
    font-weight: 400;
    font-style: italic;
  }
  
  @font-face {
    font-family: "FK Grotesk Neue";
    src: url("../fonts/FKGroteskNeue-Bold.woff2") format("woff2"),
         url("../fonts/FKGroteskNeue-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
  }
  
  @font-face {
    font-family: "FK Grotesk Neue";
    src: url("../fonts/FKGroteskNeue-BoldItalic.woff2") format("woff2"),
         url("../fonts/FKGroteskNeue-BoldItalic.woff") format("woff");
    font-weight: 700;
    font-style: italic;
  }
  
  
  /* ------------------------------------------------------------------
     COLOR VARIABLES (FROM DESIGN SYSTEM)
  ------------------------------------------------------------------ */
  
  :root {
    /* Brand colors */
    --color-beige: #FFF4E1;
    --color-nero: #000000;
    --color-giallo: #FFDB5F;
    --color-rosso: #FF6040;
    --color-blu: #4493DF;
    --color-verde: #44BC71;
    --color-viola: #A89DF1;
  
    /* Accessory color */
    --color-linea: rgba(0, 0, 0, 0.15);
  
    /* Typography base */
    --font-sans: "FK Grotesk Neue", system-ui, -apple-system,
                 BlinkMacSystemFont, "Segoe UI", sans-serif;
  
    /* ----------------------------------------------------------
       RESPONSIVE BREAKPOINTS
       ---------------------------------------------------------- */
    --breakpoint-mobile: 0;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1024px;
    --breakpoint-wide: 1440px;
  
    /* ----------------------------------------------------------
       COLUMN WIDTHS (Column/large/wide)
       Mobile first, then scales up
       ---------------------------------------------------------- */
    --col-w-1: 48px;
    --col-w-2: 93px;
    --col-w-3: 160px;
    --col-w-4: 209px;
    --col-w-5: 279px;
    --col-w-6: 326px;
    --col-w-7: 396px;
    --col-w-8: 443px;
    --col-w-9: 512px;
    --col-w-10: 559px;
    --col-w-11: 629px;
    --col-w-12: 676px;
  
    @media (min-width: 1024px) {
      --col-w-1: 93px;
      --col-w-2: 209px;
      --col-w-3: 326px;
      --col-w-4: 443px;
      --col-w-5: 559px;
      --col-w-6: 676px;
      --col-w-7: 793px;
      --col-w-8: 909px;
      --col-w-9: 1026px;
      --col-w-10: 1143px;
      --col-w-11: 1259px;
      --col-w-12: 1376px;
    }
  
    /* ----------------------------------------------------------
       OPACITY TOKENS (percent → decimal)
       ---------------------------------------------------------- */
    --opacity-1: 0.9;  /* 90% */
    --opacity-2: 0.75; /* 75% */
    --opacity-3: 0.6;  /* 60% */
    --opacity-4: 0.4;  /* 40% */
    --opacity-5: 0.2;  /* 20% */
  
    /* ----------------------------------------------------------
       MARGINS (Responsive)
       Mobile first
       ---------------------------------------------------------- */
    --margin-l-small: 16px;
    --margin-l-large: 80px;
    --margin-s: 8px;
  
    @media (min-width: 768px) {
      --margin-l-small: 24px;
      --margin-l-large: 120px;
      --margin-s: 12px;
    }
  
    @media (min-width: 1024px) {
      --margin-l-small: 32px;
      --margin-l-large: 160px;
      --margin-s: 16px;
    }
  
    /* ----------------------------------------------------------
       SPACING SCALE (Responsive)
       Mobile first, scales up progressively
       ---------------------------------------------------------- */
    --space-3xl: 80px;
    --space-2xl: 60px;
    --space-xl: 48px;
    --space-l: 40px;
    --space-m: 32px;
    --space-s: 24px;
    --space-xs: 16px;
    --space-2xs: 12px;
    --space-3xs: 6px;
  
    @media (min-width: 768px) {
      --space-3xl: 120px;
      --space-2xl: 80px;
      --space-xl: 64px;
      --space-l: 48px;
      --space-m: 40px;
      --space-s: 32px;
      --space-xs: 20px;
      --space-2xs: 14px;
      --space-3xs: 8px;
    }
  
    @media (min-width: 1024px) {
      --space-3xl: 160px;
      --space-2xl: 120px;
      --space-xl: 96px;
      --space-l: 80px;
      --space-m: 64px;
      --space-s: 40px;
      --space-xs: 24px;
      --space-2xs: 16px;
      --space-3xs: 8px;
    }
  
    /* ----------------------------------------------------------
       GUTTERS (Responsive)
       ---------------------------------------------------------- */
    --gutter-l: 12px;
    --gutter-s: 4px;
  
    @media (min-width: 768px) {
      --gutter-l: 16px;
      --gutter-s: 6px;
    }
  
    @media (min-width: 1024px) {
      --gutter-l: 24px;
      --gutter-s: 8px;
    }
  }
  
  
  /* ------------------------------------------------------------------
     GLOBAL BASE TYPOGRAPHY
  ------------------------------------------------------------------ */
  
  html {
    font-family: var(--font-sans);
    color: var(--color-nero);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  body {
    /* Prevent font scaling on landscape in mobile browsers */
    -webkit-text-size-adjust: 100%;
  }
  
  
  /* ------------------------------------------------------------------
     HEADLINES - RESPONSIVE
     Mobile first: smaller on mobile, scale up on tablet/desktop
  ------------------------------------------------------------------ */
  
  .headline-l {
    font-weight: 700;
    font-size: 32px;
    line-height: 110%;
    text-transform: uppercase;
    letter-spacing: -0.01em;
  }
  
  @media (min-width: 768px) {
    .headline-l {
      font-size: 56px;
    }
  }
  
  @media (min-width: 1024px) {
    .headline-l {
      font-size: 80px;
    }
  }
  
  
  .headline-m {
    font-weight: 700;
    font-size: 24px;
    line-height: 120%;
  }
  
  @media (min-width: 768px) {
    .headline-m {
      font-size: 32px;
    }
  }
  
  @media (min-width: 1024px) {
    .headline-m {
      font-size: 40px;
    }
  }
  
  
  .headline-s {
    font-weight: 700;
    font-size: 18px;
    line-height: 120%;
  }
  
  @media (min-width: 768px) {
    .headline-s {
      font-size: 22px;
    }
  }
  
  @media (min-width: 1024px) {
    .headline-s {
      font-size: 26px;
    }
  }
  
  
  .headline-s-alt {
    font-weight: 700;
    font-size: 16px;
    line-height: 120%;
  }
  
  @media (min-width: 768px) {
    .headline-s-alt {
      font-size: 18px;
    }
  }
  
  @media (min-width: 1024px) {
    .headline-s-alt {
      font-size: 20px;
    }
  }
  
  
  /* ------------------------------------------------------------------
     BODY L – 17px (desktop) / 140
     Mobile: 14px → Tablet: 16px → Desktop: 17px
  ------------------------------------------------------------------ */
  
  .body-l {
    font-size: 14px;
    line-height: 140%;
  }
  
  @media (min-width: 768px) {
    .body-l {
      font-size: 16px;
    }
  }
  
  @media (min-width: 1024px) {
    .body-l {
      font-size: 17px;
    }
  }
  
  
  .body-l-italic {
    font-size: 14px;
    line-height: 140%;
    font-style: italic;
  }
  
  @media (min-width: 768px) {
    .body-l-italic {
      font-size: 16px;
    }
  }
  
  @media (min-width: 1024px) {
    .body-l-italic {
      font-size: 17px;
    }
  }
  
  
  .body-l-strong {
    font-size: 14px;
    line-height: 140%;
    font-weight: 700;
  }
  
  @media (min-width: 768px) {
    .body-l-strong {
      font-size: 16px;
    }
  }
  
  @media (min-width: 1024px) {
    .body-l-strong {
      font-size: 17px;
    }
  }
  
  
  .body-l-strong-italic {
    font-size: 14px;
    line-height: 140%;
    font-weight: 700;
    font-style: italic;
  }
  
  @media (min-width: 768px) {
    .body-l-strong-italic {
      font-size: 16px;
    }
  }
  
  @media (min-width: 1024px) {
    .body-l-strong-italic {
      font-size: 17px;
    }
  }
  
  
  /* ------------------------------------------------------------------
     BODY M – 14px (desktop) / 140
     Mobile: 13px → Tablet: 13.5px → Desktop: 14px
  ------------------------------------------------------------------ */
  
  .body-m {
    font-size: 13px;
    line-height: 140%;
  }
  
  @media (min-width: 768px) {
    .body-m {
      font-size: 13.5px;
    }
  }
  
  @media (min-width: 1024px) {
    .body-m {
      font-size: 14px;
    }
  }
  
  
  .body-m-italic {
    font-size: 13px;
    line-height: 140%;
    font-style: italic;
  }
  
  @media (min-width: 768px) {
    .body-m-italic {
      font-size: 13.5px;
    }
  }
  
  @media (min-width: 1024px) {
    .body-m-italic {
      font-size: 14px;
    }
  }
  
  
  .body-m-strong {
    font-size: 13px;
    line-height: 140%;
    font-weight: 700;
  }
  
  @media (min-width: 768px) {
    .body-m-strong {
      font-size: 13.5px;
    }
  }
  
  @media (min-width: 1024px) {
    .body-m-strong {
      font-size: 14px;
    }
  }
  
  
  .body-m-strong-italic {
    font-size: 13px;
    line-height: 140%;
    font-weight: 700;
    font-style: italic;
  }
  
  @media (min-width: 768px) {
    .body-m-strong-italic {
      font-size: 13.5px;
    }
  }
  
  @media (min-width: 1024px) {
    .body-m-strong-italic {
      font-size: 14px;
    }
  }
  
  
  /* ------------------------------------------------------------------
     BODY S – 11px (desktop) / 140
     Mobile: 10px → Tablet: 10.5px → Desktop: 11px
  ------------------------------------------------------------------ */
  
  .body-s {
    font-size: 10px;
    line-height: 140%;
  }
  
  @media (min-width: 768px) {
    .body-s {
      font-size: 10.5px;
    }
  }
  
  @media (min-width: 1024px) {
    .body-s {
      font-size: 11px;
    }
  }
  
  
  .body-s-italic {
    font-size: 10px;
    line-height: 140%;
    font-style: italic;
  }
  
  @media (min-width: 768px) {
    .body-s-italic {
      font-size: 10.5px;
    }
  }
  
  @media (min-width: 1024px) {
    .body-s-italic {
      font-size: 11px;
    }
  }
  
  
  .body-s-strong {
    font-size: 10px;
    line-height: 140%;
    font-weight: 700;
  }
  
  @media (min-width: 768px) {
    .body-s-strong {
      font-size: 10.5px;
    }
  }
  
  @media (min-width: 1024px) {
    .body-s-strong {
      font-size: 11px;
    }
  }
  
  
  .body-s-strong-italic {
    font-size: 10px;
    line-height: 140%;
    font-weight: 700;
    font-style: italic;
  }
  
  @media (min-width: 768px) {
    .body-s-strong-italic {
      font-size: 10.5px;
    }
  }
  
  @media (min-width: 1024px) {
    .body-s-strong-italic {
      font-size: 11px;
    }
  }
  
  
  /* ------------------------------------------------------------------
     COLOR UTILITY CLASSES
  ------------------------------------------------------------------ */
  
  .text-beige { color: var(--color-beige); }
  .text-black { color: var(--color-nero); }
  .text-yellow { color: var(--color-giallo); }
  .text-red   { color: var(--color-rosso); }
  .text-blue  { color: var(--color-blu); }
  .text-green { color: var(--color-verde); }
  .text-purple{ color: var(--color-viola); }
  
  .bg-beige { background-color: var(--color-beige); }
  .bg-black { background-color: var(--color-nero); }
  .bg-yellow{ background-color: var(--color-giallo); }
  .bg-red   { background-color: var(--color-rosso); }
  .bg-blue  { background-color: var(--color-blu); }
  .bg-green { background-color: var(--color-verde); }
  .bg-purple{ background-color: var(--color-viola); }
  
  
  /* ------------------------------------------------------------------
     UTILITY CLASSES FOR SPACE & OPACITY
     Responsive-aware: variables handle breakpoint scaling automatically
  ------------------------------------------------------------------ */
  
  /* Opacity utilities */
  .o-1 { opacity: var(--opacity-1); }
  .o-2 { opacity: var(--opacity-2); }
  .o-3 { opacity: var(--opacity-3); }
  .o-4 { opacity: var(--opacity-4); }
  .o-5 { opacity: var(--opacity-5); }
  
  /* Margin utilities */
  .m-l-small { margin-left: var(--margin-l-small); }
  .m-l-large { margin-left: var(--margin-l-large); }
  .m-s       { margin: var(--margin-s); }
  
  /* Padding / spacing helpers (all responsive via CSS variables) */
  .p-3xl { padding: var(--space-3xl); }
  .p-2xl { padding: var(--space-2xl); }
  .p-xl  { padding: var(--space-xl); }
  .p-l   { padding: var(--space-l); }
  .p-m   { padding: var(--space-m); }
  .p-s   { padding: var(--space-s); }
  .p-xs  { padding: var(--space-xs); }
  .p-2xs { padding: var(--space-2xs); }
  .p-3xs { padding: var(--space-3xs); }
  
  /* Gap helpers for flex/grid (responsive) */
  .gap-l { gap: var(--space-l); }
  .gap-m { gap: var(--space-m); }
  .gap-s { gap: var(--space-s); }
  
  /* Gutters (responsive) */
  .gutter-l { column-gap: var(--gutter-l); }
  .gutter-s { column-gap: var(--gutter-s); }
  
  
  /* ------------------------------------------------------------------
     RESPONSIVE TYPOGRAPHY UTILITIES
     Use these classes to adjust typography on different breakpoints
  ------------------------------------------------------------------ */
  
  /* Hide on mobile, show on tablet+ */
  @media (max-width: 767px) {
    .hide-mobile { display: none !important; }
  }
  
  /* Hide on tablet+, show on mobile */
  @media (min-width: 768px) {
    .show-mobile { display: none !important; }
  }
  
  /* Text alignment helpers with media queries */
  @media (max-width: 767px) {
    .text-center-mobile { text-align: center; }
    .text-left-mobile { text-align: left; }
  }
  
  @media (min-width: 768px) {
    .text-center-tablet { text-align: center; }
    .text-left-tablet { text-align: left; }
  }
  
  @media (min-width: 1024px) {
    .text-center-desktop { text-align: center; }
    .text-left-desktop { text-align: left; }
  }