/* ============================================================
   OTTOMAN PROJEKTS — Design Tokens: Color + Type
   Bau · Sanierung · Service — Großraum Düsseldorf / NRW
   Dark editorial system. Roman-antiquity motif. Warm off-white
   on near-black, single orange accent, serif display + mono labels.
   ============================================================ */

/* --- Webfonts (same families the live site loads) ----------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* --- Self-hosted uploaded font ------------------------------ */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url('fonts/Roboto-Italic-VariableFont_wdth_wght.ttf') format('truetype-variations');
}

:root {
  /* ---- Surfaces (near-black, slightly warm steps) ---------- */
  --bg:        #060606;   /* page background           */
  --bg-2:      #0E0E0E;   /* alternate section band    */
  --bg-3:      #121212;   /* raised band               */
  --card:      #161616;   /* card / panel base         */
  --card-2:    #1C1C1C;   /* hover / nested panel      */

  /* ---- Hairlines (off-white at low alpha) ------------------ */
  --line:      rgba(240, 235, 224, 0.08);  /* default divider  */
  --line-2:    rgba(240, 235, 224, 0.14);  /* stronger border  */

  /* ---- Ink ------------------------------------------------- */
  --text:      #F0EBE0;   /* primary — warm off-white  */
  --muted:     #6A6A6A;   /* tertiary / captions       */
  --muted-2:   #9A958A;   /* secondary — warm grey     */

  /* ---- Accent (single brand orange) ------------------------ */
  --orange:        #E8601A;
  --orange-2:      #F07030;                 /* hover / lighter */
  --orange-soft:   rgba(232, 96, 26, 0.14); /* tint fills      */

  /* ---- Type families --------------------------------------- */
  --serif: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif; /* @kind font */
  --sans:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* @kind font */
  --mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* @kind font */

  /* ---- Layout ---------------------------------------------- */
  --maxw: 1280px;
  --pad:  clamp(20px, 4vw, 64px);

  /* ---- Radii ----------------------------------------------- */
  --r-pill: 999px;   /* buttons, chips, badges          */
  --r-card: 2px;     /* cards are near-square / sharp    */

  /* ---- Elevation (used sparingly — accent glow, not grey) -- */
  --glow-orange: 0 16px 36px rgba(232, 96, 26, 0.35);
  --glow-soft:   0 12px 32px rgba(232, 96, 26, 0.25);

  /* ============================================================
     SEMANTIC TYPE ROLES
     Apply these classes/vars directly. Values mirror live site.
     ============================================================ */

  /* Display headings — serif, tight, weight 400–500 */
  --h1-size: clamp(48px, 8vw, 128px);
  --h2-size: clamp(36px, 5.2vw, 84px);
  --h3-size: clamp(24px, 2.4vw, 36px);
  --h4-size: clamp(18px, 1.4vw, 22px);
  --h-leading: 1.06;
  --h-tracking: -0.01em;

  /* Body */
  --body-size: 16px;
  --body-leading: 1.55;

  /* Mono label tracking presets */
  --track-eyebrow: 0.22em;
  --track-nav:     0.14em;
  --track-btn:     0.18em;
}

/* ============================================================
   BASE
   ============================================================ */
.op-type-base, body.op {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--body-size);
  line-height: var(--body-leading);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--orange); color: #fff; }

/* ============================================================
   HEADINGS  — serif display, italic = emphasis in orange
   Usage:  <h2>Gebaut auf <em>Erfahrung.</em></h2>
   ============================================================ */
.op-h1, .op-h2, .op-h3, .op-h4 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: var(--h-tracking);
  line-height: var(--h-leading);
  margin: 0;
  color: var(--text);
}
.op-h1 { font-size: var(--h1-size); font-weight: 400; }
.op-h2 { font-size: var(--h2-size); }
.op-h3 { font-size: var(--h3-size); }
.op-h4 { font-size: var(--h4-size); }

/* Italic emphasis word — the brand's signature move (Roboto Italic VF) */
.op-h1 em, .op-h2 em, .op-h3 em, .op-h4 em,
.op-emph {
  font-family: 'Roboto', var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--orange);
}

/* ============================================================
   LABELS & EYEBROWS  — JetBrains Mono, uppercase, wide tracking
   ============================================================ */

/* Orange eyebrow with a leading rule — section openers / hero */
.op-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.op-eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--orange);
  display: inline-block;
}

/* Muted section label — pairs a Roman numeral with a name */
.op-section-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
}

/* Inline italic-serif accent used inside running heads */
.op-roman {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--orange);
  font-size: 0.85em;
}

/* Body deck / lede paragraph */
.op-deck {
  font-family: var(--sans);
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.6;
  color: var(--muted-2);
  max-width: 52ch;
  text-wrap: pretty;
}

/* Caption / micro mono label (image tags, captions) */
.op-caption {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
}