/* =================================================================
   Lorenz GmbH — Design Tokens
   Colors, type, spacing, dividers, radii.
   Editorial restraint. Light surfaces, deep ink. No gradients.
   ================================================================= */

:root {
  /* -----------------------------------------------------------------
     Color — surfaces (light, layered, never washed)
     ----------------------------------------------------------------- */
  --surface-cream:        #F5F1E9;  /* primary page surface */
  --surface-cream-warm:   #EEE8DC;  /* alternating section, slightly darker */
  --surface-ink:          #0C2A2A;  /* deep teal-black; full-bleed dark sections, footer */
  --surface-ink-deep:     #081F1F;  /* used only for nested elements on ink */
  --surface-rust:         #A65A3E;  /* category accent surface — used sparingly */

  /* Foreground — ink reads as near-black, but has the teal undertone of the brand */
  --ink-primary:          #0C2A2A;  /* body text on cream */
  --ink-secondary:        #3A4F4F;  /* sub-headers, meta, callouts on cream */
  --ink-tertiary:         #6F7C7C;  /* low-emphasis text, captions, fine print */
  --ink-on-dark:          #F5F1E9;  /* text on ink surfaces — matches cream */
  --ink-on-dark-muted:    #B7C2C1;  /* secondary text on ink */
  --ink-on-dark-faint:    #6F8181;  /* tertiary text on ink */

  /* Accents — used as ink, never as fills behind text */
  --accent-gold:          #B79A5A;  /* eyebrow caps, hairline rules, link underline, monogram */
  --accent-gold-soft:     #C7AE74;  /* hover/lighter state for gold */
  --accent-teal:          #1E6E6C;  /* feature card surface, link hover on cream */
  --accent-teal-deep:     #155251;  /* pressed/active state */
  --accent-rust:          #A65A3E;  /* category accent — CTAs that warrant warmth */
  --accent-rust-deep:     #8B4A33;  /* pressed/active state */

  /* Dividers — always thin, always low-contrast. Never heavy borders. */
  --divider-on-cream:     rgba(12, 42, 42, 0.12);
  --divider-on-cream-strong: rgba(12, 42, 42, 0.22);
  --divider-on-ink:       rgba(245, 241, 233, 0.14);
  --divider-on-ink-strong:rgba(245, 241, 233, 0.28);

  /* Focus ring — used for keyboard a11y only */
  --focus-ring:           rgba(183, 154, 90, 0.45);


  /* -----------------------------------------------------------------
     Type — Georgia for editorial display; system sans for body.
     Tabular figures wherever numbers appear (dates, amounts, years).
     ----------------------------------------------------------------- */
  --font-serif:    Georgia, "Source Serif 4", "Source Serif Pro", "Times New Roman", serif;
  --font-sans:     -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", "Segoe UI", Roboto, system-ui, sans-serif;
  --font-mono:     "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Weights — restraint. Display sets at regular; body at regular; emphasis at 500/600 */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;

  /* Type scale — editorial, generous, single-column emphasis.
     Scale ratio ≈ 1.25 (major third), tuned by hand. */
  --size-display:   clamp(40px, 5.6vw, 72px);   /* hero headline */
  --size-h1:        clamp(32px, 3.4vw, 44px);   /* section opener */
  --size-h2:        clamp(24px, 2.2vw, 30px);   /* sub-section / feature card title */
  --size-h3:        20px;                       /* card title */
  --size-body-lg:   18px;                       /* hero sub, primary body */
  --size-body:      16px;                       /* default body */
  --size-body-sm:   15px;                       /* secondary body */
  --size-caption:   13px;                       /* meta, fine print */
  --size-eyebrow:   12px;                       /* spaced-caps category labels */
  --size-micro:     11px;                       /* legal, footnotes */

  /* Line heights — display tight, body comfortable */
  --leading-display: 1.08;
  --leading-heading: 1.18;
  --leading-body:    1.55;
  --leading-tight:   1.35;

  /* Letter spacing — spaced caps are signature */
  --tracking-eyebrow: 0.18em;   /* "ESTABLISHED 2006", "REAL ASSETS" */
  --tracking-button:  0.14em;   /* "GET IN TOUCH", "INVESTMENT APPROACH" */
  --tracking-display: -0.005em; /* very slight tightening on serif display */
  --tracking-normal:  0;


  /* -----------------------------------------------------------------
     Spacing — generous vertical rhythm, single-column emphasis
     Base unit: 4px. Scale doubles roughly every two steps.
     ----------------------------------------------------------------- */
  --space-0:   0;
  --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: 160px;   /* section padding-y, desktop */
  --space-12: 200px;   /* hero padding-y, desktop */

  /* Content widths — narrow, editorial */
  --width-prose:      640px;   /* single-column copy */
  --width-content:    980px;   /* primary content column */
  --width-wide:       1200px;  /* two-column layouts */
  --width-max:        1400px;  /* outer container cap */
  --gutter:           clamp(20px, 4vw, 48px);


  /* -----------------------------------------------------------------
     Radii — almost square. 4px is the maximum.
     ----------------------------------------------------------------- */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;     /* the cap. Buttons, cards, inputs. */


  /* -----------------------------------------------------------------
     Lines — hairlines only. No heavy borders.
     ----------------------------------------------------------------- */
  --hairline:        1px solid var(--divider-on-cream);
  --hairline-strong: 1px solid var(--divider-on-cream-strong);
  --hairline-dark:   1px solid var(--divider-on-ink);


  /* -----------------------------------------------------------------
     Motion — restrained. Quick fades. No bounces. No springs.
     ----------------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.0, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 360ms;
}


/* =================================================================
   Semantic primitives — use these tags directly or as classes.
   Everything pulls from the tokens above.
   ================================================================= */

html, body {
  background: var(--surface-cream);
  color: var(--ink-primary);
  font-family: var(--font-sans);
  font-size: var(--size-body);
  line-height: var(--leading-body);
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Tabular figures everywhere numbers appear */
.numerals,
time,
.amount,
.year { font-variant-numeric: tabular-nums lining-nums; }

/* Display + headings — serif, editorial */
.display,
h1.display {
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: var(--size-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--ink-primary);
  text-wrap: balance;
}

h1, .h1 {
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: var(--size-h1);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-display);
  color: var(--ink-primary);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: var(--size-h2);
  line-height: var(--leading-heading);
  color: var(--ink-primary);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: var(--size-h3);
  line-height: var(--leading-tight);
  color: var(--ink-primary);
}

/* Eyebrow — the brand's signature label.
   Spaced caps, gold, sits above headlines and section blocks. */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--size-eyebrow);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-gold);
  line-height: 1;
  display: inline-block;
}
.eyebrow.on-ink   { color: var(--accent-gold); }
.eyebrow.on-cream { color: var(--accent-gold); }
.eyebrow.muted    { color: var(--ink-tertiary); }

p, .body {
  font-family: var(--font-sans);
  font-size: var(--size-body);
  line-height: var(--leading-body);
  color: var(--ink-secondary);
  text-wrap: pretty;
}
.body-lg { font-size: var(--size-body-lg); line-height: var(--leading-body); }
.body-sm { font-size: var(--size-body-sm); }

.caption,
small { font-size: var(--size-caption); color: var(--ink-tertiary); line-height: 1.45; }
.micro { font-size: var(--size-micro); color: var(--ink-tertiary); letter-spacing: 0.02em; }

/* Inline links — gold underline on the marketing site, ink on prose */
a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--duration-fast) var(--ease-standard);
}
a.link-gold {
  color: var(--accent-gold);
  text-decoration: underline;
  text-decoration-color: var(--accent-gold);
}
a.link-gold:hover { color: var(--accent-gold-soft); }

/* Caps link — the "EXPLORE OUR APPROACH" pattern */
a.caps-link {
  font-family: var(--font-sans);
  font-size: var(--size-eyebrow);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-gold);
  text-decoration: underline;
  text-decoration-color: var(--accent-gold);
  text-underline-offset: 5px;
}
a.caps-link:hover { color: var(--accent-gold-soft); }

/* Hairline divider — the only horizontal rule used */
hr, .divider {
  border: 0;
  border-top: 1px solid var(--divider-on-cream);
  margin: var(--space-7) 0;
}
.divider.on-ink { border-top-color: var(--divider-on-ink); }