/* ==========================================================================
   MQM - Design Tokens
   Direction: "Nachtarchitectuur" (13 July 2026 restyle).
   Warm ink canvas, large photography, mint accents carried from the logo.
   Do not hardcode colors/sizes elsewhere - reference these variables.
   ========================================================================== */

:root {
  /* --- Colors ---
     Sampled from the Domust investment memorandum (July 2026): deep green
     canvas #0E1F19, near-white text #F2F6F4, sage body #93A9A1, mint accent
     #3BB795, hairline #34433D. Raised surfaces are derived from the canvas
     so the contrast steps stay identical to the original system. */
  --color-ink: #0e1f19;            /* page canvas, deep green */
  --color-ink-raised: #152721;     /* raised surface (cards, bands) */
  --color-ink-panel: #1b2e28;      /* interactive / elevated surface */
  --color-text: #f2f6f4;           /* headings, primary text */
  --color-text-muted: #93a9a1;     /* body text, secondary (sage) */
  --color-text-faint: #6f847b;     /* captions, metadata */
  --color-line: rgba(242, 246, 244, 0.16);      /* borders, separators */
  --color-line-soft: rgba(242, 246, 244, 0.08); /* hairline separators */
  --color-mint: #3bb795;           /* brand accent, logo dot */
  --color-mint-soft: rgba(59, 183, 149, 0.38);  /* accent borders */
  --color-mint-ink: #06201a;       /* text on mint fills */
  --color-brand-mint: #3bb795;     /* alias kept for logo styles */

  /* --- Scrims (photography always readable) --- */
  --scrim-hero: linear-gradient(180deg,
    rgba(14, 31, 25, 0.62) 0%,
    rgba(14, 31, 25, 0.18) 42%,
    rgba(14, 31, 25, 0.88) 100%);
  --scrim-card: linear-gradient(180deg,
    rgba(14, 31, 25, 0.05) 45%,
    rgba(14, 31, 25, 0.82) 100%);

  /* --- Typography - families --- */
  --font-sans: 'Schibsted Grotesk', ui-sans-serif, system-ui, -apple-system,
    'Segoe UI', Roboto, Arial, sans-serif;
  --font-logo: 'Montserrat', var(--font-sans);

  /* --- Typography - scale (edge-inspired: large, tight, calm) --- */
  --text-eyebrow: 11px;    --tracking-eyebrow: 0.2em;
  --text-caption: 12.5px;  --tracking-caption: 0.08em;
  --text-body: 16px;       --leading-body: 1.6;
  --text-lede: 19px;       --leading-lede: 1.55;
  --text-heading-sm: 21px; --tracking-heading-sm: -0.01em;
  --text-heading: clamp(26px, 3vw, 34px);      --tracking-heading: -0.02em;
  --text-heading-lg: clamp(34px, 4.6vw, 54px); --tracking-heading-lg: -0.035em;
  --text-display: clamp(44px, 7vw, 86px);      --tracking-display: -0.04em;
  --leading-display: 1.02;
  --leading-heading: 1.12;

  /* --- Weights --- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* --- Spacing --- */
  --spacing-8: 8px;    --spacing-12: 12px;  --spacing-16: 16px;  --spacing-20: 20px;
  --spacing-24: 24px;  --spacing-32: 32px;  --spacing-40: 40px;  --spacing-48: 48px;
  --spacing-64: 64px;  --spacing-80: 80px;  --spacing-96: 96px;  --spacing-120: 120px;
  --spacing-160: 160px;

  /* --- Layout --- */
  --page-max-width: 1240px;
  --section-pad: clamp(72px, 10vw, 132px);
  --gutter: clamp(20px, 4vw, 48px);

  /* --- Radius (architectural: sharp) --- */
  --radius-none: 0px;
  --radius-hair: 2px;
  --radius-pill: 999px;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.16, 0.62, 0.23, 0.98);
  --reveal-distance: 20px;
  --reveal-duration: 0.7s;
}