/* ============================================================
   AHRE — Wohnen am Rhein
   colors_and_type.css — Foundational + semantic design tokens
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/BricolageGrotesque-VariableFont_opsz_wdth_wght.ttf") format("truetype");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/InstrumentSerif-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/InstrumentSerif-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Core palette ---------- */
  --ink:        #15120E;  /* near-black, warm. Primary text + dark surfaces */
  --paper:      #F4EFE6;  /* warm off-white. Default page background */
  --beige:      #E2DDD0;  /* neutral graubeige. Letterhead-grade surface */
  --beige-deep: #BFB7A6;  /* deeper beige. Hairlines, muted text on light */

  --yellow:     #E8FF3D;  /* PRIMARY accent — neon gelb. Always present */
  --mint:       #A8F3D0;  /* secondary accent — soft mint */
  --lilac:      #C8A6FF;  /* secondary accent — flieder */

  /* ---------- Semantic foreground ---------- */
  --fg-1: var(--ink);                 /* primary text */
  --fg-2: rgba(21, 18, 14, 0.62);     /* secondary text / captions */
  --fg-3: rgba(21, 18, 14, 0.40);     /* tertiary / metadata */
  --fg-on-ink:   var(--paper);        /* text on dark surfaces */
  --fg-on-ink-2: rgba(244, 239, 230, 0.60);
  --fg-on-accent: var(--ink);         /* text on yellow/mint/lilac */

  /* ---------- Semantic surfaces ---------- */
  --surface-page:   var(--paper);
  --surface-raised: #FBF8F2;          /* cards on paper */
  --surface-sunken: var(--beige);
  --surface-dark:   var(--ink);

  /* ---------- Lines & borders ---------- */
  --hairline:      rgba(21, 18, 14, 0.12);
  --hairline-soft: rgba(21, 18, 14, 0.07);
  --hairline-on-ink: rgba(244, 239, 230, 0.16);
  --border-strong: var(--ink);

  /* ---------- Type families ---------- */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body:    "Bricolage Grotesque", system-ui, sans-serif;
  --font-serif:   "Instrument Serif", Georgia, serif;   /* italic = signature voice */
  --font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- Type scale (fluid-friendly base) ---------- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 17px;
  --text-md:   20px;
  --text-lg:   26px;
  --text-xl:   34px;
  --text-2xl:  46px;
  --text-3xl:  62px;
  --text-4xl:  84px;
  --text-5xl:  116px;

  --tracking-tight:  -0.025em;  /* display headings */
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-eyebrow: 0.24em;   /* uppercase eyebrows / labels */

  --leading-tight: 0.84;        /* big stacked display */
  --leading-snug:  1.05;
  --leading-body:  1.55;

  /* ---------- Spacing scale (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-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  /* Note: the highlight box behind "RE" and key tags use radius 0 (hard square) */

  /* ---------- Shadows (soft, editorial — never heavy) ---------- */
  --shadow-sm: 0 1px 2px rgba(21,18,14,0.05);
  --shadow-md: 0 8px 24px -12px rgba(21,18,14,0.18);
  --shadow-lg: 0 24px 60px -24px rgba(21,18,14,0.28);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
}

/* ============================================================
   Semantic element styles — opt in by wrapping in .ahre
   ============================================================ */
.ahre {
  font-family: var(--font-body);
  color: var(--fg-1);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ahre h1, .ahre .h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-4xl);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  margin: 0;
}
.ahre h2, .ahre .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-tight);
  line-height: 1.08;
  margin: 0;
}
.ahre h3, .ahre .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  letter-spacing: -0.015em;
  line-height: 1.12;
  margin: 0;
}
.ahre h4, .ahre .h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-md);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
}

/* Serif italic — the "voice": slogans, pull quotes, accents */
.ahre .serif,
.ahre .voice {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}
.ahre .display-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
}

/* Eyebrow / kicker label */
.ahre .eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}

.ahre p, .ahre .body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--fg-1);
  margin: 0;
  text-wrap: pretty;
}
.ahre .lead {
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--fg-1);
}
.ahre small, .ahre .caption {
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--fg-2);
}
.ahre .mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0;
}

/* Highlight mark — the brand's signature: hard-square neon box behind text */
.ahre .mark {
  background: var(--yellow);
  color: var(--ink);
  padding: 0.04em 0.28em 0.1em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.ahre .mark--mint  { background: var(--mint); }
.ahre .mark--lilac { background: var(--lilac); }