/* ============================================================
   WITCHER TAVERN — Design System
   Fonts: Playfair Display (headings) + Lora (body) via Google Fonts
   Loaded in head.html
   ============================================================ */

:root {
  /* ── Grid ─────────────────────────────────────────────── */
  --grid-container-width: 83.4%;
  --grid-column-width: calc(var(--grid-container-width) / 12);
  --grid-gutter-width: 8.3%;

  /* ── Spacing ──────────────────────────────────────────── */
  --spacing-xs:  4px;
  --spacing-s:   8px;
  --spacing-m:   12px;
  --spacing-l:   24px;
  --spacing-xl:  32px;
  --spacing-xxl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 96px;
  --spacing-5xl: 128px;

  /* ── Palette: Ink (dark browns) ───────────────────────── */
  --color-ink-100: #e0c8a0;
  --color-ink-200: #c4a070;
  --color-ink-300: #a87e4a;
  --color-ink-400: #8b6434;
  --color-ink-500: #6b4c24;
  --color-ink-600: #4a3418;
  --color-ink-700: #2d1f0e;
  --color-ink-800: #1a1108;
  --color-ink-900: #0c0905;

  /* ── Palette: Gold (primary accent) ──────────────────── */
  --color-gold-100: #faf0d0;
  --color-gold-200: #f0d888;
  --color-gold-300: #e4c060;
  --color-gold-400: #d4a840;
  --color-gold-500: #c89028;
  --color-gold-600: #a87018;
  --color-gold-700: #845410;
  --color-gold-800: #5e3c08;
  --color-gold-900: #3a2404;

  /* ── Palette: Parchment (light surfaces) ─────────────── */
  --color-parchment-100: #fdf8f0;
  --color-parchment-200: #f8f0e0;
  --color-parchment-300: #f0e4cc;
  --color-parchment-400: #e8d8b8;
  --color-parchment-500: #dcc8a0;
  --color-parchment-600: #c4a878;
  --color-parchment-700: #a08858;
  --color-parchment-800: #786040;
  --color-parchment-900: #503e28;

  /* ── Palette: Crimson (brand) ─────────────────────────── */
  --color-crimson-100: #fce8e8;
  --color-crimson-200: #f4bfbf;
  --color-crimson-300: #e88888;
  --color-crimson-400: #d45050;
  --color-crimson-500: #b82020;
  --color-crimson-600: #941818;
  --color-crimson-700: #701010;
  --color-crimson-800: #4c0808;
  --color-crimson-900: #2c0404;

  /* ── Palette: Forest (Witcher nature accent) ──────────── */
  --color-forest-100: #d8ecc0;
  --color-forest-200: #b0d890;
  --color-forest-300: #84c060;
  --color-forest-400: #5ca838;
  --color-forest-500: #3c8820;
  --color-forest-600: #2c6818;
  --color-forest-700: #1e4c10;
  --color-forest-800: #12300a;
  --color-forest-900: #081804;

  /* ── Palette: Ash (neutral greys) ────────────────────── */
  --color-ash-100: #e8e4dc;
  --color-ash-200: #d0ccc0;
  --color-ash-300: #b4b0a8;
  --color-ash-400: #989490;
  --color-ash-500: #7c7870;
  --color-ash-600: #605c58;
  --color-ash-700: #484440;
  --color-ash-800: #302c28;
  --color-ash-900: #1c1814;

  /* ── Semantic: Backgrounds ────────────────────────────── */
  --color-background:          var(--color-ink-900);
  --color-background-elevated: var(--color-ink-800);
  --color-background-overlay:  var(--color-ink-700);
  --color-shaded:              var(--color-ink-800);

  /* ── Semantic: Surfaces (parchment) ──────────────────── */
  --color-surface:       var(--color-parchment-200);
  --color-surface-raised: var(--color-parchment-100);
  --color-surface-inset: var(--color-parchment-300);

  /* ── Semantic: Text ───────────────────────────────────── */
  --color-text:               var(--color-parchment-300);
  --color-text-secondary:     var(--color-ink-200);
  --color-text-muted:         var(--color-ink-300);
  --color-text-on-surface:    var(--color-ink-800);
  --color-text-on-surface-muted: var(--color-ink-600);
  --color-text-accent:        var(--color-gold-400);
  --color-link:               var(--color-gold-400);

  /* ── Semantic: Accent & Brand ────────────────────────── */
  --color-accent:       var(--color-gold-500);
  --color-accent-hover: var(--color-gold-400);
  --color-accent-subtle: var(--color-gold-900);
  --color-brand:        var(--color-crimson-500);
  --color-brand-hover:  var(--color-crimson-600);

  /* ── Semantic: Borders ───────────────────────────────── */
  --color-border:         var(--color-ink-600);
  --color-border-accent:  var(--color-gold-700);
  --color-border-subtle:  var(--color-ink-700);
  --color-border-surface: var(--color-parchment-500);

  /* ── Semantic: Utility aliases ───────────────────────── */
  --color-light: #fff;
  --color-dark:  #000;

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-card:       0 4px 32px rgb(12 9 5 / 70%);
  --shadow-parchment:  0 2px 16px rgb(12 9 5 / 35%);
  --shadow-glow-gold:  0 0 20px rgb(200 144 40 / 30%);
  --shadow-glow-brand: 0 0 20px rgb(184 32 32 / 30%);

  /* ── Border Radius ────────────────────────────────────── */
  --radius-s:  2px;
  --radius-m:  4px;
  --radius-l:  8px;
  --radius-xl: 16px;

  /* ── Fonts ────────────────────────────────────────────── */
  --font-heading: "Playfair Display", georgia, "Times New Roman", serif;
  --font-body:    "Lora", georgia, "Times New Roman", serif;
  --font-family:  var(--font-body);

  /* ── Heading sizes ────────────────────────────────────── */
  --heading-font-size-xxl: 52px;
  --heading-font-size-xl:  40px;
  --heading-font-size-l:   32px;
  --heading-font-size-m:   24px;
  --heading-font-size-s:   20px;
  --heading-font-size-xs:  16px;
  --heading-line-height:   1.2;

  /* ── Body sizes ───────────────────────────────────────── */
  --body-font-size-xxxl: 25px;
  --body-font-size-xxl:  22px;
  --body-font-size-xl:   20px;
  --body-font-size-l:    18px;
  --body-font-size-m:    16px;
  --body-font-size-s:    14px;
  --body-font-size-xs:   12px;
  --body-line-height:    1.7;

  /* ── Misc layout ──────────────────────────────────────── */
  --header-height: 64px;
  --breadcrumb-height: 24px;
}

/* ── Base ─────────────────────────────────────────────────── */

html {
  scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
  margin: 0;
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--body-font-size-m);
  line-height: var(--body-line-height);
  padding: var(--header-height) 0 0;

  &.has-breadcrumb {
    margin: calc(var(--header-height) + var(--breadcrumb-height)) 0 0;
  }

  &.no-header {
    --header-height: 0;

    margin: 0;
  }
}

header {
  display: none;
  height: var(--header-height);
  position: fixed;
}

a {
  color: var(--color-link);
  text-decoration-color: var(--color-border-accent);
  transition: color 0.2s ease;

  &:hover {
    color: var(--color-accent-hover);
  }

  /* ── Buttons ────────────────────────────────────────────── */
  &.btn {
    display: inline-block;
    line-height: 1;
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-decoration: none;
    border: 1px solid var(--color-parchment-400);
    padding: 10px 20px;
    box-sizing: border-box;
    color: var(--color-ink-900);
    background: var(--color-parchment-300);
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;

    &:hover {
      background: var(--color-parchment-200);
    }

    &.btn-outline {
      color: var(--color-parchment-300);
      background: transparent;
      border-color: var(--color-parchment-400);

      &:hover {
        background: var(--color-parchment-300);
        color: var(--color-ink-900);
      }
    }
  }

  &.btn-accent {
    color: var(--color-ink-900);
    background: var(--color-accent);
    border-color: var(--color-accent);

    &:hover {
      background: var(--color-accent-hover);
      border-color: var(--color-accent-hover);
      box-shadow: var(--shadow-glow-gold);
    }

    &.btn-outline {
      color: var(--color-accent);
      background: transparent;

      &:hover {
        color: var(--color-ink-900);
        background: var(--color-accent);
      }
    }
  }

  &.btn-primary {
    color: var(--color-parchment-200);
    background: var(--color-ink-600);
    border-color: var(--color-parchment-700);

    &:hover {
      background: var(--color-ink-500);
      border-color: var(--color-parchment-600);
    }

    &.btn-outline {
      color: var(--color-parchment-300);
      background: transparent;
      border-color: var(--color-parchment-700);

      &:hover {
        background: var(--color-ink-600);
        color: var(--color-parchment-200);
      }
    }
  }

  &.btn-secondary {
    color: var(--color-surface);
    background: var(--color-ash-500);
    border-color: var(--color-ash-500);

    &.btn-outline {
      color: var(--color-ash-300);
      background: transparent;
      border-color: var(--color-ash-500);
    }
  }

  &.btn-negative {
    color: var(--color-light);
    background: var(--color-brand);
    border-color: var(--color-brand);

    &:hover {
      background: var(--color-brand-hover);
      box-shadow: var(--shadow-glow-brand);
    }

    &.btn-outline {
      color: var(--color-brand);
      background: transparent;
    }
  }
}

/* ── Sections ──────────────────────────────────────────────── */
.section {
  display: block;

  > .default-content {
    max-width: var(--grid-container-width);
    margin: 0 auto;
  }

  &.narrow > div {
    max-width: var(--grid-container-width);
    margin-inline: auto;
  }
}

main {
  ul,
  ol {
    padding-inline-start: 24px;

    ul,
    ol {
      padding-inline-start: 12px;
    }
  }
}

button {
  cursor: pointer;
}

li {
  margin-block: 0.6em;
}

/* ── Headings ──────────────────────────────────────────────── */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--heading-line-height);
  color: var(--color-text);
  letter-spacing: -0.01em;
}

h1 { font-size: var(--heading-font-size-xxl); }
h2 { font-size: var(--heading-font-size-xl);  }
h3 { font-size: var(--heading-font-size-l);   }
h4 { font-size: var(--heading-font-size-m);   }
h5 { font-size: var(--heading-font-size-s);   }
h6 { font-size: var(--heading-font-size-xs);  }

strong {
  font-weight: 600;
}

em {
  font-style: italic;
  color: var(--color-text-accent);
}

/* ── Decorative divider (used between recipe sections) ─────── */
hr {
  border: none;
  border-top: 1px solid var(--color-border-accent);
  margin: var(--spacing-xl) auto;
  opacity: 0.4;
  width: 60%;
}

/* ── Forms ─────────────────────────────────────────────────── */
input,
textarea,
select,
button {
  font: inherit;
}

/* ── Media ─────────────────────────────────────────────────── */
img {
  width: 100%;
  height: auto;
}

svg {
  width: 20px;
  height: 20px;
}

/* ── Responsive grid ───────────────────────────────────────── */
@media (width >= 1440px) {
  :root {
    --grid-container-width: 1200px;
  }
}

/* ── AEM skeleton / loading states ────────────────────────── */
main > div,
.has-template,
div[data-status] {
  display: none;
}

aem-sidekick {
  opacity: 0;

  &[open="true"].is-ready {
    opacity: 1;
  }
}