@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=DM+Sans:wght@300;400;500&display=swap');

/* ===== tokens/colors.css ===== */
/* ─── Ölmühle 8 · Color Tokens ───────────────────────────────── */

:root {
  /* ── Base palette ── */
  --ink:          #1a1612;   /* near-black, warm */
  --ink-2:        #2a2420;   /* slightly lifted dark */
  --ink-3:        #3a3430;   /* dark body text */
  --paper:        #f5f0e8;   /* warm cream background */
  --paper-2:      #ede8dc;   /* slightly deeper cream */
  --paper-3:      #e4dfd3;   /* section divider tone */

  /* ── Rust / Terracotta – primary accent ── */
  --rust:         #b84a2e;
  --rust-light:   #d4603e;
  --rust-dark:    #8f3822;
  --rust-faint:   rgba(184, 74, 46, 0.07);

  /* ── Gold – value / number accent ── */
  --gold:         #c9a84c;
  --gold-light:   #dfc070;
  --gold-dark:    #a8872f;
  --gold-faint:   rgba(201, 168, 76, 0.12);

  /* ── Warm grey ── */
  --warm-grey:       #8c8070;
  --warm-grey-light: #b8afa0;
  --warm-grey-dark:  #5c5040;

  /* ── Divider / line ── */
  --line:         rgba(26, 22, 18, 0.12);
  --line-strong:  rgba(26, 22, 18, 0.28);
  --line-on-dark: rgba(255, 255, 255, 0.08);

  /* ── Legacy navy (original site palette) ── */
  --navy:              #032731;
  --navy-mid:          #032e3a;
  --navy-light:        #1c424d;
  --navy-text:         #5b777f;
  --navy-text-light:   #d9e0e2;
  --navy-gold:         #f3ca27;

  /* ── Text on surfaces ── */
  --on-dark:          rgba(255, 255, 255, 0.90);
  --on-dark-muted:    rgba(255, 255, 255, 0.55);
  --on-dark-subtle:   rgba(255, 255, 255, 0.35);
  --on-rust:          #ffffff;
  --on-paper:         var(--ink);
  --on-paper-muted:   var(--warm-grey);

  /* ── Semantic aliases ── */
  --color-bg:           var(--paper);
  --color-bg-dark:      var(--ink);
  --color-bg-section:   var(--paper-2);
  --color-text:         var(--ink);
  --color-text-muted:   var(--warm-grey);
  --color-accent:       var(--rust);
  --color-value:        var(--gold);
  --color-border:       var(--line);
}

/* ===== tokens/typography.css ===== */
/* ─── Ölmühle 8 · Typography Tokens ─────────────────────────── */

/* Google Fonts – Playfair Display (display serif) + DM Sans (body) */


:root {
  /* ── Font families ── */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'Courier New', Courier, monospace;

  /* ── Font sizes ── */
  --text-2xs:   0.65rem;   /* ~10px – micro label  */
  --text-xs:    0.7rem;    /* ~11px – eyebrow/tag  */
  --text-sm:    0.85rem;   /* ~14px – secondary    */
  --text-base:  1rem;      /* ~16px – body         */
  --text-lg:    1.05rem;   /* ~17px – large body   */
  --text-xl:    1.3rem;    /* ~21px – sub-heading  */
  --text-2xl:   1.6rem;    /* ~26px – card heading */
  --text-3xl:   2rem;      /* ~32px – section h2   */
  --text-4xl:   clamp(1.8rem, 3.5vw, 2.8rem);
  --text-hero:  clamp(2.4rem, 5vw, 4.2rem);

  /* ── Font weights ── */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;
  --weight-black:   900;

  /* ── Line heights ── */
  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.7;
  --leading-relaxed: 1.85;

  /* ── Letter spacing ── */
  --tracking-label:  0.22em;   /* EYEBROW LABEL */
  --tracking-wide:   0.12em;   /* Button / badge */
  --tracking-normal: 0.05em;   /* Subtle spacing */
  --tracking-tight:  -0.01em;  /* Large display */
}

/* ===== tokens/spacing.css ===== */
/* ─── Ölmühle 8 · Spacing Tokens ────────────────────────────── */

:root {
  /* ── 4px base scale ── */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* ── Layout ── */
  --container-max:    1140px;
  --container-narrow: 780px;
  --container-wide:   1400px;
  --section-v:        var(--space-20);
  --section-h:        var(--space-8);

  /* ── Component sizing ── */
  --btn-h-sm:    2.25rem;
  --btn-h-base:  3rem;
  --btn-h-lg:    3.75rem;
  --input-h:     3rem;
  --badge-h:     1.6rem;

  /* ── Gap defaults ── */
  --gap-sm:   var(--space-4);
  --gap-base: var(--space-6);
  --gap-lg:   var(--space-8);
  --gap-xl:   var(--space-16);
}

/* ===== tokens/effects.css ===== */
/* ─── Ölmühle 8 · Effects Tokens ────────────────────────────── */

:root {
  /* ── Border radius ── */
  /* Architectural / editorial aesthetic: NO rounded corners by default */
  --radius-none: 0;
  --radius-sm:   2px;   /* minimal – input focus rings only */
  --radius-full: 9999px; /* pill – rarely used */

  /* ── Shadows ── */
  --shadow-sm:  0 1px 4px rgba(26, 22, 18, 0.07);
  --shadow-md:  0 4px 16px rgba(26, 22, 18, 0.10);
  --shadow-lg:  0 8px 32px rgba(26, 22, 18, 0.16);
  --shadow-xl:  0 16px 64px rgba(26, 22, 18, 0.22);

  /* ── Transitions ── */
  --ease-base:  cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out:   cubic-bezier(0, 0, 0.2, 1); /* @kind other */
  --ease-in:    cubic-bezier(0.4, 0, 1, 1); /* @kind other */

  --duration-fast:   150ms; /* @kind other */
  --duration-base:   250ms; /* @kind other */
  --duration-slow:   500ms; /* @kind other */
  --duration-reveal: 700ms; /* @kind other */

  --transition-fast: var(--duration-fast) var(--ease-base); /* @kind other */
  --transition-base: var(--duration-base) var(--ease-base); /* @kind other */
  --transition-slow: var(--duration-slow) var(--ease-out); /* @kind other */

  /* ── Border presets ── */
  --border-subtle:   1px solid var(--line);
  --border-medium:   1px solid var(--line-strong);
  --border-ink:      3px solid var(--ink);
  --border-rust:     3px solid var(--rust);
  --border-gold:     3px solid var(--gold);

  /* ── Overlays ── */
  --overlay-photo:   linear-gradient(to top, rgba(26,22,18,0.92) 0%, rgba(26,22,18,0.30) 55%, transparent 100%); /* @kind other */
  --overlay-subtle:  linear-gradient(to bottom, rgba(26,22,18,0.0) 0%, rgba(26,22,18,0.55) 100%); /* @kind other */
  --overlay-glass:   rgba(26, 22, 18, 0.12); /* @kind other */

  /* ── Blur ── */
  --blur-sm:   blur(4px); /* @kind other */
  --blur-base: blur(8px); /* @kind other */
  --blur-lg:   blur(20px); /* @kind other */
}

/* ===== tokens/base.css ===== */
/* ─── Ölmühle 8 · Base / Reset ───────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ── Typography resets ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-text);
}

p {
  font-family: var(--font-body);
  line-height: var(--leading-relaxed);
}

a {
  color: var(--rust);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

a:hover { opacity: 0.7; }

img, video {
  display: block;
  max-width: 100%;
}

ul, ol { list-style: none; }

button, input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

button { cursor: pointer; border: none; background: none; }

/* ── Layout utilities ── */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--section-h);
}

.container--narrow {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--section-h);
}

/* ── Section eyebrow label pattern ── */
.label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--rust);
}

.label--on-dark {
  color: var(--gold);
}

/* ── Divider bar ── */
.divider {
  width: 3rem;
  height: 3px;
  background: var(--rust);
  border: none;
  display: block;
  margin-block: var(--space-8);
}

.divider--gold { background: var(--gold); }
.divider--ink  { background: var(--ink); }

/* ── Reveal animation ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity var(--duration-reveal) var(--ease-out),
              transform var(--duration-reveal) var(--ease-out);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Responsive media ── */
@media (max-width: 768px) {
  :root {
    --section-h: var(--space-6);
  }
}