/* ============================================================
   feinplaner — Colors & Type Tokens
   Architecture practice · Stuttgart · Timo Pietschmann
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@200;300;400;500;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* ─── Type families ─────────────────────────────────────── */
  /* Display: condensed grotesque — echoes the "feinplaner" wordmark.
     The logo pairs Barlow Condensed Thin (fein) with Barlow Condensed Bold (planer). */
  --font-display: "Barlow Condensed", "Oswald", "Helvetica Neue", sans-serif;
  --font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* ─── Type weights ──────────────────────────────────────── */
  --w-thin:        200;   /* "fein" — fine, light, drafted */
  --w-light:       300;
  --w-regular:     400;
  --w-medium:      500;
  --w-bold:        700;   /* "planer" — solid, structural */
  --w-black:       800;

  /* ─── Type scale (architectural — generous, calm) ───────── */
  --fs-display:    96px;   /* hero wordmark on covers */
  --fs-h1:         64px;
  --fs-h2:         40px;
  --fs-h3:         28px;
  --fs-h4:         20px;
  --fs-body-lg:    18px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    12px;
  --fs-micro:      11px;   /* labels, captions in plan drawings */

  /* ─── Line heights ──────────────────────────────────────── */
  --lh-tight:      1.05;   /* for big condensed display */
  --lh-snug:       1.2;
  --lh-normal:     1.5;
  --lh-loose:      1.7;    /* body copy, German runs long */

  /* ─── Tracking ──────────────────────────────────────────── */
  --tr-tight:      -0.02em;
  --tr-normal:     0;
  --tr-wide:       0.04em;
  --tr-wider:      0.12em;  /* small caps eyebrows */

  /* ─── Color · Neutrals (paper + ink) ────────────────────── */
  --paper:         #FAFAF7;   /* warm off-white — drawing paper */
  --paper-2:       #F2F1EC;   /* slightly cooler card surface */
  --bone:          #E8E6DF;   /* soft neutral border */
  --stone-100:     #D8D5CC;
  --stone-200:     #B8B4A8;
  --stone-300:     #8C8880;
  --stone-400:     #5C5A55;
  --ink:           #1A1A1A;   /* near-black, body & headlines */
  --ink-soft:      #2E2E2C;

  /* ─── Color · Architectural accents (from the work) ─────── */
  /* Petrol/teal — the Foyer cabinet wall */
  --petrol:        #0F5560;
  --petrol-soft:   #2A7A85;
  --petrol-tint:   #DCE9EB;

  /* Terracotta — the Foyer floor */
  --terracotta:    #D88656;
  --terracotta-soft: #E5A982;
  --terracotta-tint: #F6E4D6;

  /* Wood / oak — the slatted ceiling, panelling */
  --oak:           #C9A372;
  --oak-soft:      #DDC09A;
  --oak-tint:      #F1E6D2;

  /* Brick red — façade detail */
  --brick:         #8C3A2A;
  --brick-soft:    #B0573F;

  /* Slate — concrete, stone, sky-shadow */
  --slate:         #5A6470;
  --slate-soft:    #8A929C;
  --slate-tint:    #DEE2E6;

  /* ─── Semantic foreground / background ──────────────────── */
  --bg:            var(--paper);
  --bg-elev-1:     #FFFFFF;
  --bg-elev-2:     var(--paper-2);
  --bg-inverse:    var(--ink);

  --fg-1:          var(--ink);          /* primary text */
  --fg-2:          var(--stone-400);    /* secondary text */
  --fg-3:          var(--stone-300);    /* tertiary / meta */
  --fg-muted:      var(--stone-200);
  --fg-on-dark:    var(--paper);

  --border:        var(--bone);
  --border-strong: var(--stone-200);
  --rule:          var(--ink);          /* the architectural hairline rule */

  --accent:        var(--petrol);
  --accent-fg:     #FFFFFF;
  --accent-2:      var(--terracotta);

  /* ─── Spacing — modular, based on a 4 / 8 grid ──────────── */
  --sp-0:   0;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   96px;
  --sp-10:  128px;
  --sp-11:  192px;

  /* ─── Radii — minimal; architecture is mostly square ────── */
  --r-0:    0;            /* default — no rounding */
  --r-1:    2px;          /* hairline softening only */
  --r-2:    4px;
  --r-pill: 999px;        /* tags / chips only */

  /* ─── Shadows — subtle; this brand barely uses them ─────── */
  --shadow-0:  none;
  --shadow-1:  0 1px 0 0 rgba(26,26,26,0.06);
  --shadow-2:  0 1px 2px rgba(26,26,26,0.06), 0 4px 12px rgba(26,26,26,0.04);
  --shadow-3:  0 8px 28px rgba(26,26,26,0.10);
  --shadow-inset: inset 0 0 0 1px var(--border);

  /* ─── Hairlines (architectural) ─────────────────────────── */
  --hairline:        1px solid var(--ink);
  --hairline-soft:   1px solid var(--border);
  --hairline-dashed: 1px dashed var(--stone-300);

  /* ─── Motion ────────────────────────────────────────────── */
  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);   /* calm, architectural */
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --dur-fast:    140ms;
  --dur-base:    240ms;
  --dur-slow:    480ms;
  --dur-image:   800ms;        /* image fades */

  /* ─── Container widths ──────────────────────────────────── */
  --w-prose:    640px;
  --w-content:  960px;
  --w-wide:    1280px;
  --w-max:     1440px;
}

/* ─── Semantic typographic styles ───────────────────────── */

.fp-display {
  font-family: var(--font-display);
  font-weight: var(--w-thin);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}
/* The signature "fein|planer" treatment — thin + bold side-by-side */
.fp-display .b { font-weight: var(--w-bold); }

.fp-h1 {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}

.fp-h2 {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.fp-h3 {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.fp-h4 {
  font-family: var(--font-body);
  font-weight: var(--w-medium);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.fp-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--fs-caption);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--fg-2);
}

.fp-body {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--fg-1);
  text-wrap: pretty;
}

.fp-lead {
  font-family: var(--font-body);
  font-weight: var(--w-light);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-loose);
  color: var(--fg-1);
}

.fp-meta {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--fs-caption);
  letter-spacing: var(--tr-wide);
  color: var(--fg-2);
}

.fp-caption {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-2);
}

/* The wordmark itself — use this for the brand name in running copy */
.fp-wordmark {
  font-family: var(--font-display);
  font-weight: var(--w-thin);
  letter-spacing: var(--tr-normal);
  color: var(--fg-1);
}
.fp-wordmark .planer {
  font-weight: var(--w-bold);
}