/* ============================================================
 * La Famiglia's — Colors & Type
 * Single source of truth for the brand's foundational tokens.
 * ============================================================ */

/* ---------- Web fonts (Google Fonts as substitution) ---------- */
/* Note: This system ships with Google Fonts as the live source for
   Fraunces, Inter, and Caveat. If self-hosted .ttf/.woff2 files are
   added to /fonts later, swap the imports below for @font-face. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=Caveat:wght@400;600&display=swap');

:root {
  /* ============================================================
   * COLOR — Brand
   * ============================================================ */
  --tomato-red:        #8C1D18;   /* primary action / brand */
  --tomato-red-hover:  #741612;   /* 10% darken */
  --cream:             #F5EDE0;   /* default page background */
  --cream-warm:        #EFE4D2;   /* deeper cream for alternating sections */
  --basilico-green:    #3E5F3A;   /* accent — badges, delivery pills */
  --basilico-deep:     #2E4A2C;   /* basilico hover */
  --forno-black:       #1A1A1A;   /* body text + high-contrast surfaces */
  --oro:               #C9A961;   /* heritage detail only */
  --oro-deep:          #A8893F;   /* oro on cream contrast */

  /* ---------- COLOR — Neutrals ---------- */
  --white:             #FFFFFF;
  --gray-100:          #F5F5F5;
  --gray-300:          #D4D4D4;
  --gray-500:          #737373;
  --gray-700:          #404040;
  --gray-900:          #171717;

  /* ---------- COLOR — Semantic ---------- */
  --bg:                var(--cream);
  --bg-alt:            var(--cream-warm);
  --bg-inverse:        var(--forno-black);
  --surface:           var(--white);
  --surface-muted:     var(--gray-100);

  --fg:                var(--forno-black);
  --fg-muted:          var(--gray-700);
  --fg-subtle:         var(--gray-500);
  --fg-on-dark:        var(--cream);
  --fg-on-red:         var(--white);

  --border:            var(--gray-300);
  --border-strong:     var(--forno-black);
  --rule:              rgba(26, 26, 26, 0.12);

  --accent:            var(--tomato-red);
  --accent-hover:      var(--tomato-red-hover);
  --accent-secondary:  var(--basilico-green);
  --accent-heritage:   var(--oro);

  --success:           var(--basilico-green);
  --whatsapp:          #25D366;

  /* ============================================================
   * TYPE — Families
   * ============================================================ */
  --font-display:      'Fraunces', 'Playfair Display', Georgia, serif;
  --font-body:         'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-script:       'Caveat', 'Permanent Marker', cursive;

  /* ---------- TYPE — Weights ---------- */
  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;

  /* ---------- TYPE — Scale (desktop) ---------- */
  --size-display:      96px;
  --size-h1:           48px;
  --size-h2:           32px;
  --size-h3:           24px;
  --size-body-lg:      18px;
  --size-body:         16px;
  --size-small:        14px;
  --size-caps:         12px;

  /* ---------- TYPE — Line heights ---------- */
  --lh-display:        1.05;
  --lh-h1:             1.15;
  --lh-h2:             1.2;
  --lh-h3:             1.3;
  --lh-body:           1.6;
  --lh-small:          1.5;
  --lh-caps:           1.4;

  /* ---------- TYPE — Tracking ---------- */
  --track-display:     -0.02em;
  --track-h1:          -0.01em;
  --track-tight:       -0.005em;
  --track-normal:      0;
  --track-caps:        0.15em;

  /* ============================================================
   * SPACING — 8px base scale
   * ============================================================ */
  --space-xs:          4px;
  --space-sm:          8px;
  --space-md:          16px;
  --space-lg:          24px;
  --space-xl:          32px;
  --space-2xl:         48px;
  --space-3xl:         64px;
  --space-4xl:         96px;
  --space-5xl:         128px;

  /* ---------- LAYOUT ---------- */
  --container-max:     1200px;
  --container-pad:     48px;
  --container-pad-mobile: 24px;

  /* ---------- RADII ---------- */
  --radius-badge:      2px;
  --radius-button:     4px;
  --radius-input:      4px;
  --radius-card:       8px;
  --radius-pill:       999px;

  /* ---------- SHADOWS ---------- */
  --shadow-rest:       0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-hover:      0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-modal:      0 12px 32px rgba(0, 0, 0, 0.12);
  --shadow-float:      0 4px 12px rgba(0, 0, 0, 0.15);

  /* ---------- MOTION ---------- */
  --ease:              cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:          200ms;
  --dur-base:          300ms;
  --dur-slow:          500ms;
}

/* ============================================================
 * SEMANTIC ELEMENT STYLES — apply where useful
 * ============================================================ */

.lf-display {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--size-display);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
}

.lf-h1, h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--size-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--track-h1);
}

.lf-h2, h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--size-h2);
  line-height: var(--lh-h2);
}

.lf-h3, h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--size-h3);
  line-height: var(--lh-h3);
}

.lf-body-lg {
  font-family: var(--font-body);
  font-size: var(--size-body-lg);
  line-height: var(--lh-body);
}

.lf-body, p {
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--lh-body);
}

.lf-small, small {
  font-family: var(--font-body);
  font-size: var(--size-small);
  line-height: var(--lh-small);
}

.lf-caps {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--size-caps);
  line-height: var(--lh-caps);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}

.lf-script {
  font-family: var(--font-script);
  font-weight: var(--weight-regular);
}

/* Mobile scaling — apply at <=768px */
@media (max-width: 768px) {
  :root {
    --size-display: 56px;
    --size-h1:      32px;
    --size-h2:      24px;
    --size-h3:      20px;
    --size-body-lg: 16px;
    --size-body:    14px;
    --size-small:   12px;
  }
}