/* ============================================================
   Villa Momenti — Design Tokens
   Inspired by Plus Two Films' editorial, minimal aesthetic.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=DM+Sans:wght@300;400;500;600;700&display=swap');

:root {
  /* ------------------------------------------------------------
     COLORS — 4 neutral tokens. That is the palette.
     Cream is the primary light surface; black is the primary dark.
     The warm taupe is the ONLY accent; use sparingly for rules,
     underlines, tags, hover accents.
     ------------------------------------------------------------ */
  --vm-cream:       #faf8f5;  /* primary light surface */
  --vm-black:       #111111;  /* primary dark surface + main text */
  --vm-mid:         #555555;  /* secondary text / metadata */
  --vm-taupe:       #b8a89a;  /* warm accent (borders, rules, subtle tags) */

  /* Low-level neutrals derived from the four (use sparingly) */
  --vm-cream-shade: #f2efe8;  /* hover shade on cream */
  --vm-taupe-soft:  #e8e1d9;  /* very light taupe, borders on cream */
  --vm-black-soft:  #1a1a1a;  /* hover shade on black */
  --vm-black-border:#2a2a2a;  /* subtle borders on black surfaces */

  /* ------------------------------------------------------------
     SEMANTIC COLORS
     ------------------------------------------------------------ */
  --bg:             var(--vm-cream);
  --bg-inverse:     var(--vm-black);
  --bg-subtle:      var(--vm-cream-shade);

  --fg:             var(--vm-black);        /* primary body text on cream */
  --fg-muted:       var(--vm-mid);          /* captions, metadata */
  --fg-inverse:     var(--vm-cream);        /* text on black */
  --fg-inverse-muted:#a5a09a;               /* muted text on black */

  --accent:         var(--vm-taupe);
  --border:         var(--vm-taupe-soft);
  --border-strong:  var(--vm-taupe);
  --border-inverse: var(--vm-black-border);

  /* ------------------------------------------------------------
     TYPE — Two families.
     Playfair Display: editorial display / uppercase section labels.
     DM Sans: body, nav, CTAs, numbers.
     ------------------------------------------------------------ */
  --font-serif: 'Playfair Display', 'Times New Roman', Georgia, serif;
  --font-sans:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:  ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* Type scale (clamped for fluid display headings) */
  --fs-display-xl: clamp(64px, 9vw, 136px);  /* hero display */
  --fs-display-l:  clamp(48px, 6vw, 84px);   /* section display */
  --fs-display-m:  clamp(36px, 4vw, 56px);   /* card display */
  --fs-h1:         40px;
  --fs-h2:         32px;
  --fs-h3:         24px;
  --fs-h4:         20px;
  --fs-body-lg:    18px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    13px;
  --fs-label:      12px;  /* uppercase section labels */

  /* Line heights */
  --lh-tight:      1.05;   /* display */
  --lh-heading:    1.15;   /* h1–h4 */
  --lh-body:       1.6;    /* body */
  --lh-relaxed:    1.75;   /* long-form prose */

  /* Letter spacing */
  --ls-display:   -0.02em; /* Playfair display, tighter */
  --ls-heading:   -0.01em;
  --ls-body:       0;
  --ls-label:      0.22em; /* uppercase labels, generous */
  --ls-caps-sm:    0.12em; /* smaller uppercase */

  /* ------------------------------------------------------------
     LAYOUT — 2-column editorial grid
     48px gutter (outer padding), 80px gap between columns.
     ------------------------------------------------------------ */
  --container-max: 1440px;
  --gutter:        48px;
  --col-gap:       80px;

  /* Spacing scale (8pt base) */
  --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: 160px;

  /* Radii — minimal, mostly sharp */
  --radius-0: 0px;      /* default; editorial prefers sharp corners */
  --radius-sm: 2px;     /* tags, chips */
  --radius-md: 4px;     /* inputs */
  --radius-pill: 999px; /* pills / avatars */

  /* Shadows — extremely subtle, only on cards that lift on hover */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(17,17,17,0.04);
  --shadow-2: 0 12px 32px -12px rgba(17,17,17,0.12);
  --shadow-hover: 0 24px 48px -18px rgba(17,17,17,0.18);

  /* Motion */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);     /* entry */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);     /* hover */
  --dur-fast:      150ms;
  --dur-base:      280ms;
  --dur-slow:      600ms;
  --dur-entry:     900ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Import this file and get sensible defaults on raw HTML.
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .vm-display {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--fg);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  margin: 0;
}

.vm-display-xl { font-size: var(--fs-display-xl); line-height: var(--lh-tight); letter-spacing: var(--ls-display); font-weight: 500; }
.vm-display-l  { font-size: var(--fs-display-l);  line-height: var(--lh-tight); letter-spacing: var(--ls-display); font-weight: 500; }
.vm-display-m  { font-size: var(--fs-display-m);  line-height: var(--lh-tight); letter-spacing: var(--ls-display); font-weight: 500; }

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  margin: 0 0 1em 0;
  text-wrap: pretty;
}

small, .vm-caption {
  font-size: var(--fs-caption);
  color: var(--fg-muted);
}

/* Section label — uppercase, wide-tracked, serif or sans variant */
.vm-label {
  font-family: var(--font-serif);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  font-weight: 400;
  color: var(--fg-muted);
}
.vm-label--sans {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: var(--ls-caps-sm);
}

/* Body variants */
.vm-lede {
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  font-weight: 400;
}

/* Italic serif pull quote */
.vm-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-display-m);
  line-height: 1.25;
  color: var(--fg);
}

/* Dark-surface overrides */
.vm-on-dark {
  background: var(--bg-inverse);
  color: var(--fg-inverse);
}
.vm-on-dark h1, .vm-on-dark h2, .vm-on-dark h3, .vm-on-dark h4,
.vm-on-dark p, .vm-on-dark .vm-display-xl,
.vm-on-dark .vm-display-l, .vm-on-dark .vm-display-m { color: var(--fg-inverse); }
.vm-on-dark .vm-label, .vm-on-dark small, .vm-on-dark .vm-caption { color: var(--fg-inverse-muted); }

a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--border-strong); transition: border-color var(--dur-base) var(--ease-in-out), color var(--dur-base) var(--ease-in-out); }
a:hover { border-color: var(--fg); }

/* Standard entry animation: translateY(24px) → 0, fade in. */
@keyframes vm-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.vm-rise { animation: vm-rise var(--dur-entry) var(--ease-out) both; }