/* =====================================================================
   DIVINO MENU — DESIGN TOKENS
   ---------------------------------------------------------------------
   This file is the single source of truth for the menu's visual style.
   Change a value here and it propagates everywhere it's used.
   ===================================================================== */

/* ---------------------------------------------------------------------
   FONT FACES
   The fonts are bundled with the plugin in /assets/fonts/.
   --------------------------------------------------------------------- */
@font-face {
  font-family: "Rodmolle Condensed";
  src: local("Georgia"), local("Times New Roman");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0026;
}

@font-face {
  font-family: "Rodmolle Condensed";
  src: url("../fonts/RodmolleCondensedDemoBold-yYm1d.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-0025, U+0027-007E, U+00A0-024F, U+1E00-1EFF, U+2000-206F;
}

@font-face {
  font-family: "Avenir Roman";
  src: url("../fonts/Avenir-Roman-12.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Kept for fallback/legacy reference. Safe to remove if you no longer
   need this weight anywhere. */
@font-face {
  font-family: "Avenir Next";
  src: url("../fonts/AvenirNextLTPro-Demi.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------------
   DESIGN VARIABLES
   --------------------------------------------------------------------- */
:root {

  /* ============== COLORS ============== */
  --divino-color-primary:       #3B6F7C;   /* item names, prices, section titles */
  --divino-color-description:   #959595;   /* item descriptions */
  --divino-color-accent:        #CF5D3D;   /* "New" badge, highlights */
  --divino-color-background:    #FFFFFF;
  --divino-color-border:        #3B6F7C;
  --divino-color-dots:          #C4C4C4;   /* dotted leader between name and price */

  /* ============== FONTS ============== */
  /* Section titles ("Soups", "Salads", etc.) use Rodmolle.
     Everything else uses Avenir Roman, only differentiated by size + color. */
  --divino-font-section-title:  "Rodmolle Condensed", sans-serif;
  --divino-font-item-name:      "Avenir Roman", sans-serif;
  --divino-font-item-price:     "Avenir Roman", sans-serif;
  --divino-font-description:    "Avenir Roman", sans-serif;
  --divino-font-addon:          "Avenir Roman", sans-serif;
  --divino-font-badge:          "Avenir Roman", sans-serif;

  /* ============== FONT SIZES (desktop) ============== */
  /* Translated from your em values assuming a 16px base.
     Item name 1.1em ≈ 17.6px → rounded to 18px.
     Description 0.65em ≈ 10.4px → bumped to 13px for readability.
     Tweak freely. */
  --divino-size-section-title:  28px;
  --divino-size-item-name:      18px;
  --divino-size-item-price:     18px;
  --divino-size-description:    13px;
  --divino-size-addon:          13px;
  --divino-size-badge:          13px;

  /* ============== FONT WEIGHTS ============== */
  /* Avenir Roman only ships at weight 400, so all body text uses 400.
     Rodmolle Condensed Demo Bold is 700. */
  --divino-weight-section-title: 700;
  --divino-weight-item-name:     400;
  --divino-weight-item-price:    400;
  --divino-weight-description:   400;
  --divino-weight-addon:         400;
  --divino-weight-badge:         400;

  /* ============== LINE HEIGHTS ============== */
  --divino-lh-tight:    1.2;
  --divino-lh-normal:   1.5;
  --divino-lh-description: 1.2;   /* matches your Elementor 1.2em line-height */

  /* ============== SPACING ============== */
  --divino-spacing-section:        72px;   /* between sections */
  --divino-spacing-section-title:  40px;   /* below section title, above items */
  --divino-spacing-item:           28px;   /* between items */
  --divino-spacing-name-to-desc:   8px;    /* below name, above description */
  --divino-spacing-desc-to-addons: 10px;   /* below description, above add-ons */
  --divino-spacing-addon:          4px;    /* between addons */

  /* ============== CONTENT WIDTHS ============== */
  /* Constrains descriptions and add-ons narrower than the full item width
     so they don't stretch all the way across the column. Tweak to taste. */
  --divino-width-description:  85%;
  --divino-width-addons:       75%;

  /* ============== LAYOUT ============== */
  --divino-max-width:        1400px;
  --divino-page-padding-x:   24px;
  --divino-column-gap:       64px;

  /* ============== SECTION TITLE BOX ============== */
  --divino-section-box-padding-y:    14px;
  --divino-section-box-padding-x:    48px;
  --divino-section-box-border-width: 1px;
  --divino-section-box-border-radius: 0px;

  /* ============== "NEW" BADGE ============== */
  --divino-badge-new-style:    italic;
  --divino-badge-new-spacing:  4px;       /* gap above the badge */

  /* ============== DOTTED LEADER (between name and price) ============== */
  --divino-dots-style:         dotted;
  --divino-dots-thickness:     1px;
  --divino-dots-offset-y:      8px;       /* vertical position adjustment */
}