/* =============================================================
   BK Studio — Montfort-Style Template
   colors_and_type.css
   -------------------------------------------------------------
   Design tokens for a quiet, editorial, corporate-luxury brand
   inspired by mont-fort.com. Warm parchment base, deep forest
   green accent, disciplined type, generous whitespace.
   ============================================================= */

/* ---------- FONTS (lokal gehostet — DSGVO-konform) -------------
   Schriften werden vom eigenen Server geladen, nicht von Google.
   Keine IP-Übertragung an Dritte, keine Cookie-Pflicht.
   Dateien liegen in /fonts/.
---------------------------------------------------------------- */

/* ===== Geist (Sans) — 300/400/500/600/700 ===== */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== Instrument Serif — 400 regular + italic ===== */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-serif-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-serif-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-serif-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-serif-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== JetBrains Mono — 400/500 ===== */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ==== COLOR — BASE =========================================== */
  /* Pure white background, true black ink */
  --paper:        #FFFFFF;   /* primary page background */
  --paper-2:      #F5F5F4;   /* section band / card base */
  --paper-3:      #E8E7E4;   /* hairline divider tint */
  --ink:          #0A0A0A;   /* primary text — near-black */
  --ink-2:        #2A2A2A;   /* secondary text */
  --ink-3:        #6A6A6A;   /* tertiary / meta text */
  --ink-4:        #A0A0A0;   /* disabled, captions */

  /* ==== COLOR — BRAND (Black + White + Orange) ================ */
  --black:          #0A0A0A;   /* signature deep black */
  --black-soft:     #1F1F1F;   /* secondary black */
  --white:          #FFFFFF;   /* signature white */
  --orange:         #F25C1F;   /* signature orange accent */
  --orange-dark:    #C7430F;   /* hover/press */
  --orange-soft:    #FF8A55;   /* highlight */

  /* Back-compat aliases */
  --espresso:       var(--black);
  --espresso-dark:  var(--black-soft);
  --espresso-soft:  var(--ink-2);
  --cognac:         var(--orange);
  --sand:           var(--orange-soft);
  --copper:         var(--orange-dark);
  --forest:         var(--black);
  --forest-dark:    var(--black-soft);
  --forest-soft:    var(--ink-2);
  --moss:           var(--orange);

  /* ==== COLOR — SEMANTIC ======================================= */
  --fg-1:         var(--ink);
  --fg-2:         var(--ink-2);
  --fg-3:         var(--ink-3);
  --fg-4:         var(--ink-4);
  --fg-on-dark:   #F2ECE0;
  --fg-on-dark-2: #BFC5B8;

  --bg-1:         var(--paper);
  --bg-2:         var(--paper-2);
  --bg-3:         var(--paper-3);
  --bg-dark:      var(--espresso);
  --bg-darker:    var(--espresso-dark);

  --accent:       var(--espresso);
  --accent-hover: var(--espresso-dark);
  --accent-on:    #F2ECE0;

  --border-1:     rgba(10,10,10,0.10);
  --border-2:     rgba(10,10,10,0.20);
  --border-on-dark: rgba(255,255,255,0.18);

  --success:      #5A6B3A;
  --warning:      #B88A2B;
  --danger:       #8A3A2E;

  /* ==== TYPE — FAMILIES ======================================== */
  --font-serif:   'Instrument Serif', 'Times New Roman', Georgia, serif;
  --font-sans:    'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ==== TYPE — SCALE =========================================== */
  /* Editorial: big serif display, restrained sans for UI */
  --fs-display-xl: clamp(56px, 8.5vw, 128px);  /* hero */
  --fs-display-l:  clamp(44px, 6vw, 88px);     /* section opener */
  --fs-display-m:  clamp(36px, 4.5vw, 64px);   /* h1 */
  --fs-display-s:  clamp(28px, 3.2vw, 44px);   /* h2 */
  --fs-h3:         24px;
  --fs-h4:         20px;
  --fs-body-l:     19px;
  --fs-body:       16px;
  --fs-body-s:     14px;
  --fs-caption:    12px;
  --fs-eyebrow:    11px;   /* small all-caps */

  /* ==== TYPE — WEIGHT / LH / TRACKING ========================== */
  --fw-light:      300;
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;

  --lh-tight:      1.05;
  --lh-display:    1.12;
  --lh-snug:       1.3;
  --lh-body:       1.55;
  --lh-loose:      1.75;

  --tr-tight:     -0.02em;
  --tr-normal:     0;
  --tr-wide:       0.08em;
  --tr-xwide:      0.18em;   /* eyebrows / nav */

  /* ==== SPACING ================================================= */
  --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;
  --space-11: 192px;

  /* ==== LAYOUT ================================================== */
  --maxw-prose:    68ch;
  --maxw-content:  1120px;
  --maxw-wide:     1440px;
  --gutter:        clamp(20px, 4vw, 56px);

  /* ==== RADII =================================================== */
  /* Montfort is nearly-square. Use radii sparingly. */
  --r-0:   0px;
  --r-1:   2px;
  --r-2:   4px;
  --r-3:   8px;
  --r-pill: 999px;

  /* ==== SHADOWS ================================================= */
  /* Shadows are almost absent. Use hairlines + paper tints instead. */
  --shadow-1: 0 1px 0 rgba(30,42,38,0.06);
  --shadow-2: 0 4px 16px rgba(30,42,38,0.06);
  --shadow-3: 0 12px 40px rgba(30,42,38,0.10);
  --shadow-inset-hair: inset 0 0 0 1px var(--border-1);

  /* ==== MOTION ================================================== */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft:    cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:     160ms;
  --dur-base:     280ms;
  --dur-slow:     600ms;
  --dur-scenic:   1200ms;
}

/* =============================================================
   SEMANTIC ELEMENT STYLES
   Use these as-is or compose into components.
   ============================================================= */

html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display + headings — SERIF, tight, near-zero tracking */
.display-xl, .display-l, .display-m, .display-s,
h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-display);
  color: var(--fg-1);
  text-wrap: balance;
}

.display-xl { font-size: var(--fs-display-xl); line-height: var(--lh-tight); font-weight: var(--fw-light); }
.display-l  { font-size: var(--fs-display-l);  font-weight: var(--fw-light); }
.display-m, h1 { font-size: var(--fs-display-m); }
.display-s, h2 { font-size: var(--fs-display-s); }

h3 {
  font-size: var(--fs-h3);
  font-family: var(--font-serif);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}

h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

/* Body */
p, .body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  max-width: var(--maxw-prose);
  text-wrap: pretty;
}

.body-l { font-size: var(--fs-body-l); line-height: var(--lh-loose); color: var(--fg-2); }
.body-s { font-size: var(--fs-body-s); color: var(--fg-3); }
.caption { font-size: var(--fs-caption); color: var(--fg-3); }

/* Eyebrow: the Montfort signature — tiny, tracked, all-caps, often numbered */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-xwide);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Numbered section marker: "1" / "2" — a core Montfort motif */
.section-number {
  font-family: var(--font-serif);
  font-size: var(--fs-display-s);
  font-weight: var(--fw-light);
  color: var(--fg-3);
  line-height: 1;
}

/* Links */
a {
  color: var(--fg-1);
  text-decoration: none;
  border-bottom: 1px solid var(--border-2);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--accent); border-color: var(--accent); }

/* Code */
code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 0.95em;
}
code { background: var(--bg-2); padding: 0.1em 0.35em; border-radius: var(--r-1); }

/* Horizontal rule — a hairline, nothing more */
hr {
  border: 0;
  border-top: 1px solid var(--border-1);
  margin: var(--space-7) 0;
}

/* Dark-surface overrides */
.on-dark {
  background: var(--bg-dark);
  color: var(--fg-on-dark);
}
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4,
.on-dark .display-xl, .on-dark .display-l, .on-dark .display-m, .on-dark .display-s {
  color: var(--fg-on-dark);
}
.on-dark p, .on-dark .body { color: var(--fg-on-dark-2); }
.on-dark .eyebrow { color: var(--fg-on-dark-2); }
.on-dark a { color: var(--fg-on-dark); border-color: var(--border-on-dark); }
.on-dark a:hover { color: var(--sand); border-color: var(--sand); }

/* Utility containers */
.container { max-width: var(--maxw-content); margin: 0 auto; padding: 0 var(--gutter); }
.container-wide { max-width: var(--maxw-wide); margin: 0 auto; padding: 0 var(--gutter); }