/* ============================================================
   LA MEDIA WALL — Foundations
   Colors, type, spacing tokens.
   ============================================================ */

/* ---- Webfonts ----
   Display: "Söhne Breit"-feel via "Neue Haas Grotesk Display Pro" alt → Google Fonts substitute = "Manrope" (geometric sans, clean, similar warmth at display sizes)
   Text: "Inter Tight" — neutral modern UI sans
   Both are flagged substitutions; see README. */
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600&family=Manrope:wght@300;400;500;600;700&display=swap");

:root {
  /* ----------------------------------------------------------
     COLOR — Neutrals (warm)
     ---------------------------------------------------------- */
  --warm-white:   #FAF8F5;   /* page bg, dominant surface */
  --soft-beige:   #E8E0D4;   /* secondary surface, dividers in light contexts */
  --light-gray:   #D4D0CB;   /* hairline borders, subtle fills */
  --muted-taupe:  #8B8278;   /* secondary text, captions, small caps labels */
  --charcoal:     #2A2826;   /* body text */
  --ink:          #1A1A1A;   /* primary headlines, strong CTAs */

  /* Wood tones (from project photography — used sparingly as accents only) */
  --wood-light:   #C9A47A;
  --wood-warm:    #A07A4F;

  /* ----------------------------------------------------------
     COLOR — Semantic
     ---------------------------------------------------------- */
  --bg:               var(--warm-white);
  --bg-alt:           var(--soft-beige);
  --surface-dark:     var(--ink);

  --fg:               var(--ink);          /* default text */
  --fg-body:          var(--charcoal);     /* paragraph */
  --fg-muted:         var(--muted-taupe);  /* meta, labels */
  --fg-on-dark:       var(--warm-white);

  --border:           var(--light-gray);
  --border-soft:      rgba(26, 26, 26, 0.08);
  --border-strong:    rgba(26, 26, 26, 0.18);

  --accent:           var(--ink);          /* there is no color accent — ink is "the accent" */

  /* ----------------------------------------------------------
     TYPOGRAPHY
     ---------------------------------------------------------- */
  --font-display:  "Manrope", "Neue Haas Grotesk Display", "Söhne", system-ui, sans-serif;
  --font-text:     "Inter Tight", "Inter", "Söhne", system-ui, sans-serif;
  --font-mono:     ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale — architectural, generous, image-led */
  --fs-eyebrow:    11px;     /* small caps labels */
  --fs-caption:    13px;
  --fs-body-sm:    14px;
  --fs-body:       16px;
  --fs-body-lg:    18px;
  --fs-lead:       22px;     /* lead/intro paragraphs */
  --fs-h6:         16px;
  --fs-h5:         20px;
  --fs-h4:         28px;
  --fs-h3:         40px;
  --fs-h2:         56px;
  --fs-h1:         88px;     /* hero scale */
  --fs-hero:       120px;    /* extra-large editorial */

  /* Weights — kept restrained */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  /* Line heights */
  --lh-tight:   1.04;
  --lh-display: 1.08;
  --lh-snug:    1.25;
  --lh-body:    1.55;
  --lh-loose:   1.7;

  /* Tracking */
  --ls-tightest:  -0.04em;   /* hero */
  --ls-tight:     -0.02em;   /* h1–h3 */
  --ls-normal:     0;
  --ls-wide:       0.08em;   /* small caps body */
  --ls-widest:     0.22em;   /* eyebrow / nav */

  /* ----------------------------------------------------------
     SPACING — 4px base, generous large steps
     ---------------------------------------------------------- */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;
  --s-11: 160px;
  --s-12: 200px;

  --section-y:  var(--s-10);   /* vertical rhythm between sections */
  --gutter:     var(--s-7);
  --max-w:      1440px;
  --max-w-text: 720px;

  /* ----------------------------------------------------------
     RADII — architectural = nearly square
     ---------------------------------------------------------- */
  --r-0:   0px;
  --r-xs:  2px;
  --r-sm:  4px;
  --r-md:  6px;          /* cap; we don't use rounded cards */
  --r-pill: 999px;       /* only on small inline tags */

  /* ----------------------------------------------------------
     ELEVATION — almost flat. Light, diffuse, never dramatic.
     ---------------------------------------------------------- */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(26,26,26,0.04);
  --shadow-2: 0 8px 24px -12px rgba(26,26,26,0.10);
  --shadow-3: 0 24px 60px -24px rgba(26,26,26,0.18);

  /* Inner shadow used on inputs */
  --inset-input: inset 0 1px 0 rgba(26,26,26,0.04);

  /* ----------------------------------------------------------
     MOTION
     ---------------------------------------------------------- */
  --ease:        cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:      180ms;
  --t-base:      300ms;
  --t-slow:      600ms;
  --t-reveal:    900ms;     /* scroll-in fades */
}

/* ============================================================
   ELEMENT BASELINES
   ============================================================ */
html, body {
  background: var(--bg);
  color: var(--fg-body);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--fg);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-display);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(48px, 7vw, var(--fs-h1)); letter-spacing: var(--ls-tightest); }
h2 { font-size: clamp(36px, 5vw, var(--fs-h2)); }
h3 { font-size: clamp(28px, 3.5vw, var(--fs-h3)); }
h4 { font-size: var(--fs-h4); letter-spacing: var(--ls-normal); font-weight: var(--fw-regular); }
h5 { font-size: var(--fs-h5); letter-spacing: var(--ls-normal); font-weight: var(--fw-regular); }

p { margin: 0; text-wrap: pretty; }
p.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--fg-body);
  font-weight: var(--fw-light);
  letter-spacing: -0.01em;
}

/* Eyebrow / small caps label — used everywhere as section tag */
.eyebrow,
[data-eyebrow] {
  font-family: var(--font-text);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Wordmark / logo type */
.wordmark {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg);
}

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
a:hover { border-bottom-color: currentColor; }

hr, .rule {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 0;
}