/* ============================================================
   Charcuteria — Design Tokens
   Color, Type, Spacing, Radii, Shadow, Motion
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Caveat:wght@400;500;600;700&family=Dancing+Script:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---------- Color: Foundation (OLIVE THEME) ---------- */
  --brown-900: #2F3A1B;     /* deepest olive — primary background */
  --brown-800: #3D4A24;     /* section backgrounds */
  --brown-700: #4F5D32;     /* borders / dividers on dark */
  --brown-600: #6B7A45;     /* hover, lighter olive */

  --cream-50:  #F5EBD8;     /* primary card / surface */
  --cream-100: #EFE3CC;     /* secondary surface */
  --cream-200: #E5D4B5;     /* "tape" / sticker accent */
  --cream-300: #D9C5A0;     /* deeper paper, dividers on cream */

  --ink-900:   #1F2710;     /* body text on cream — deep olive ink */
  --ink-700:   #4A5530;     /* secondary text on cream */
  --ink-500:   #7A8560;     /* tertiary / footnote text */

  /* ---------- Color: Accents ---------- */
  --olive:    #7A8B3F;      /* mid olive */
  --olive-light: #A8B670;   /* soft sage */
  --salami:   #C46A5E;
  --cheddar:  #D9A14A;
  --brick:    #A03A2A;
  --honey:    #E0A847;
  --champagne:#C7A560;     /* the brand's gold — logo & accents */

  /* ---------- Color: Semantic ---------- */
  --bg-primary:    var(--brown-900);
  --bg-card:       var(--cream-50);
  --bg-card-alt:   var(--cream-100);
  --bg-tape:       var(--cream-200);

  --fg-on-dark:    var(--cream-50);
  --fg-on-dark-2:  var(--cream-200);
  --fg-on-light:   var(--ink-900);
  --fg-on-light-2: var(--ink-700);
  --fg-muted:      var(--ink-500);

  --accent:        var(--brick);
  --accent-warm:   var(--cheddar);

  --border-dark:   var(--brown-700);
  --border-light:  var(--cream-300);

  --focus-ring:    var(--cheddar);

  /* ---------- Typography: Families ---------- */
  --font-display:  'Fraunces', 'Playfair Display', Garamond, serif; /* the wordmark — modern editorial serif */
  --font-headline: 'Caveat', 'Dancing Script', cursive;          /* handwritten headlines on menu cards */
  --font-script:   'Dancing Script', 'Caveat', cursive;          /* alt cursive for asides */
  --font-serif:    'Fraunces', 'Garamond', 'Georgia', serif;     /* body, menu copy, prices */
  --font-ui:       'Inter', system-ui, -apple-system, sans-serif;       /* digital UI only */

  /* ---------- Typography: Scale (semantic) ---------- */
  --display-1: 500 110px/1.0 var(--font-display);   /* Delizia wordmark scale */
  --display-2: 500 80px/1.05 var(--font-display);
  --display-3: 500 56px/1.1  var(--font-display);
  --headline-1:700 96px/1.0  var(--font-headline);  /* "Tabla Jumbo" headline scale */
  --headline-2:700 72px/1.05 var(--font-headline);
  --headline-3:600 56px/1.1  var(--font-headline);

  --aside-1:   500 36px/1.3  var(--font-script);   /* "* Incluye una mermelada" handwritten asides */
  --aside-2:   500 28px/1.35 var(--font-script);

  --h1:        600 36px/1.25 var(--font-serif);
  --h2:        600 28px/1.3  var(--font-serif);
  --h3:        600 22px/1.35 var(--font-serif);

  --body-lg:   400 20px/1.45 var(--font-serif);
  --body:      400 18px/1.5  var(--font-serif);
  --body-sm:   400 16px/1.5  var(--font-serif);

  --price-xl:  500 40px/1.0  var(--font-serif);   /* the big "$ 980" on tape */
  --price:     500 28px/1.0  var(--font-serif);

  --footnote:  400 16px/1.45 var(--font-serif);
  --caption:   400 14px/1.4  var(--font-serif);

  --ui-lg:     500 18px/1.4 var(--font-ui);
  --ui:        500 15px/1.4 var(--font-ui);
  --ui-sm:     500 13px/1.35 var(--font-ui);

  /* ---------- Spacing (4px base) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---------- Radii ---------- */
  --radius-0:    0;        /* default for editorial cards */
  --radius-sm:   4px;      /* UI inputs, buttons */
  --radius-md:   8px;      /* digital cards */
  --radius-lg:   16px;     /* photo containers when not circular */
  --radius-full: 9999px;   /* circular crops, pills */

  /* ---------- Borders ---------- */
  --border-w-1: 1px;
  --border-w-2: 2px;

  /* ---------- Shadows ---------- */
  --shadow-none: none;
  --shadow-tape: inset 0 1px 0 rgba(58, 31, 18, 0.10), inset 0 -1px 0 rgba(58, 31, 18, 0.06);
  --shadow-card: 0 2px 8px rgba(58, 31, 18, 0.15);
  --shadow-lift: 0 8px 24px rgba(58, 31, 18, 0.22);

  /* ---------- Motion ---------- */
  --ease:        cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);
  --dur-fast:    160ms;
  --dur-base:    200ms;
  --dur-slow:    300ms;
  --dur-page:    600ms;
}

/* ============================================================
   Element defaults — apply on the .charcuteria scope
   ============================================================ */

.charcuteria,
.charcuteria * { box-sizing: border-box; }

.charcuteria {
  background: var(--bg-primary);
  color: var(--fg-on-dark);
  font: var(--body);
}

.charcuteria h1 { font: var(--h1); margin: 0; }
.charcuteria h2 { font: var(--h2); margin: 0; }
.charcuteria h3 { font: var(--h3); margin: 0; }
.charcuteria p  { margin: 0; }

.charcuteria .display    { font: var(--display-1); }
.charcuteria .display-2  { font: var(--display-2); }
.charcuteria .display-3  { font: var(--display-3); }
.charcuteria .aside      { font: var(--aside-1); }
.charcuteria .aside-sm   { font: var(--aside-2); }
.charcuteria .price      { font: var(--price-xl); }
.charcuteria .footnote   { font: var(--footnote); color: var(--fg-on-light-2); }

/* "Tape" treatment — the masking-tape band behind a price */
.charcuteria .tape {
  display: inline-block;
  padding: var(--space-3) var(--space-6);
  background: var(--bg-tape);
  box-shadow: var(--shadow-tape);
  color: var(--ink-900);
}

/* Hand-drawn ornament container — soft, low-opacity food line art */
.charcuteria .ornament {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  background-repeat: no-repeat;
}