/* ============================================================
   DIMI'S GREEK HOUSE — Colors & Type
   Tequesta, FL · Modern Greek cuisine, elevated casual
   ============================================================ */

/* ----- Webfonts (Google Fonts) ----- */
@import url("https://fonts.googleapis.com/css2?family=Marcellus&family=IM+Fell+English+SC&family=Lora:ital,wght@0,400..700;1,400..700&family=Sacramento&display=swap");

:root {
  /* =========================================================
     COLOR — Sand · Beige · Olive
     The palette is a sun-bleached Aegean taverna: warm
     plaster walls, weathered olive shutters, a splash of
     terracotta from the broken plates on the floor.
     ========================================================= */

  /* -- Foundations (neutrals) -- */
  --marble:        #FAF6EE;  /* off-white plaster, primary surface */
  --beige-50:      #F4ECDD;  /* cream parchment, cards on dark */
  --beige-100:     #ECE0CA;  /* soft beige, secondary surface */
  --sand-200:      #DCC9A8;  /* warm sand, dividers + chips */
  --sand-300:      #C9B187;  /* deep sand, hover state on sand */
  --linen:         #EFE7D6;  /* linen napkin, alt surface */

  /* -- Olive (primary brand) -- */
  --olive-900:     #2E3621;  /* almost-black olive, headlines on light */
  --olive-700:     #4A5A2E;  /* deep olive, primary brand */
  --olive-600:     #5A6B3B;  /* olive, buttons + accents */
  --olive-500:     #6F8048;  /* mid olive, hover */
  --olive-300:     #A8B488;  /* dusty olive, soft fills */
  --olive-100:     #DDE3C8;  /* olive wash, badges */

  /* -- Terracotta (accent — plate-breaking, ouzo nights) -- */
  --terracotta-700: #8B3A21; /* fired clay, on light */
  --terracotta-500: #B45A36; /* terracotta, primary accent */
  --terracotta-300: #D89678; /* sunset terracotta, soft */

  /* -- Ink (text) -- */
  --ink-900:       #1B1812;  /* warm charcoal, primary text */
  --ink-700:       #3B342A;  /* warm dark, secondary text */
  --ink-500:       #6E6453;  /* warm grey, tertiary / meta */
  --ink-300:       #A89C84;  /* muted, hints + placeholders */

  /* -- Aegean (sparingly — water/sea touches only) -- */
  --aegean-600:    #3D6B7A;  /* deep teal-blue, links accent */

  /* -- Semantic / utility -- */
  --success:       var(--olive-600);
  --danger:        var(--terracotta-700);
  --warning:       #C99023;
  --info:          var(--aegean-600);

  /* =========================================================
     SEMANTIC SURFACES + TEXT
     ========================================================= */
  --bg:            var(--marble);
  --bg-alt:        var(--linen);
  --bg-deep:       var(--olive-900);     /* dark mode hero, footer */
  --surface:       #FFFFFF;
  --surface-warm:  var(--beige-50);
  --border:        rgba(46, 54, 33, 0.14);
  --border-strong: rgba(46, 54, 33, 0.28);

  --fg:            var(--ink-900);
  --fg-soft:       var(--ink-700);
  --fg-muted:      var(--ink-500);
  --fg-on-dark:    var(--marble);
  --fg-on-olive:   var(--beige-50);

  --brand:         var(--olive-700);
  --brand-hover:   var(--olive-600);
  --accent:        var(--terracotta-500);
  --accent-hover:  var(--terracotta-700);

  /* =========================================================
     TYPE — four-voice system
     Marcellus           → display & section titles (warm Roman caps)
     IM Fell English SC  → menu chapter labels (broken-stroke caps,
                            echoes the GREEK HOUSE sub-lockup)
     Lora                → body, warm serif, elevated-casual
     Sacramento          → handwritten accent ("ouzo o'clock", chef's note)
     ========================================================= */
  --font-display: "Marcellus", "Trajan Pro", "Times New Roman", serif;
  --font-menu:    "IM Fell English SC", "Marcellus", serif;
  --font-body:    "Lora", "Iowan Old Style", Georgia, serif;
  --font-hand:    "Sacramento", "Snell Roundhand", cursive;
  --font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale (1.25 major third, body 17px) */
  --fs-display:   clamp(56px, 8vw, 112px); /* @kind font */
  --fs-h1:        clamp(40px, 5vw, 64px);    /* @kind font */
  --fs-h2:        clamp(30px, 3.6vw, 44px);  /* @kind font */
  --fs-h3:        24px;
  --fs-h4:        20px;
  --fs-body-lg:   19px;
  --fs-body:      17px;
  --fs-body-sm:   15px;
  --fs-caption:   13px;
  --fs-overline:  12px;

  --lh-tight:     1.05;   /* @kind other */
  --lh-snug:      1.2;    /* @kind other */
  --lh-normal:    1.5;    /* @kind other */
  --lh-relaxed:   1.65;   /* @kind other */

  --tracking-display: 0.02em;   /* Marcellus is already roomy */
  --tracking-menu:    0.06em;   /* IM Fell English SC, broken caps */
  --tracking-overline: 0.18em;
  --tracking-body: 0.005em;

  /* =========================================================
     SPACE · RADII · SHADOW · MOTION
     ========================================================= */
  --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;

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  --shadow-xs:   0 1px 2px rgba(27, 24, 18, 0.06);
  --shadow-sm:   0 2px 6px rgba(27, 24, 18, 0.08);
  --shadow-md:   0 8px 22px rgba(27, 24, 18, 0.10), 0 2px 4px rgba(27, 24, 18, 0.04);
  --shadow-lg:   0 24px 48px rgba(27, 24, 18, 0.14), 0 4px 12px rgba(27, 24, 18, 0.06);
  --shadow-inset:inset 0 0 0 1px rgba(46, 54, 33, 0.12);

  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.7, 0, 0.3, 1);   /* @kind other */
  --dur-fast:    140ms;  /* @kind other */
  --dur-med:     280ms;  /* @kind other */
  --dur-slow:    520ms;  /* @kind other */
}

/* ============================================================
   SEMANTIC ELEMENT STYLES (drop into any page that imports this)
   ============================================================ */

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display, .h-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--olive-900);
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--olive-900);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--olive-900);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-style: italic;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--ink-900);
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--ink-900);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  text-wrap: pretty;
}

.lead {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-soft);
  font-style: italic;
}

.overline, .eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-overline);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--terracotta-700);
}

.hand, .script {
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: 36px;
  line-height: 1;
  color: var(--terracotta-500);
  display: inline-block;
}

.caption, small {
  font-size: var(--fs-caption);
  color: var(--fg-muted);
  line-height: var(--lh-normal);
}

a {
  color: var(--olive-700);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--terracotta-700); }

hr {
  border: 0;
  height: 1px;
  background: var(--border);
  margin: var(--space-6) 0;
}

/* Olive branch — full-width naturalistic horizontal divider.
   Uses the SVG asset in olive (#4A5A2E). For a different tint, swap the SVG.
   Use as: <div class="divider-vine"></div> */
.divider-vine {
  height: 56px;
  background-image: url("assets/ornaments/olive-branch.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Single olive leaf — for inline accents between words / chapters.
   Use as: <img src="assets/ornaments/olive-leaf.svg" class="olive-leaf"> */
.olive-leaf {
  display: inline-block;
  height: 14px;
  vertical-align: middle;
}