/* ============================================================
   Diamante — Colors & Type
   A dark, luxurious brand grounded in deep blacks, warm paper
   neutrals, and a single saturated crimson accent.
   ============================================================ */

/* ---------- Webfonts ------------------------------------------
   Body/UI: DIN Pro (brand font, locally hosted at fonts/dinpro.otf).
   Display: Playfair Display (Google Fonts stand-in for the didone cut in the
     Diamanté wordmark — see README Caveats).
   Secondary italic: Cormorant Garamond italic for pull-quotes.
----------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&display=swap');

@font-face {
  font-family: 'DIN Pro';
  src: url('fonts/dinpro.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ----- Core brand palette ----- */
  --obsidian:       #0A0A0A; /* true deep black — primary bg */
  --onyx:           #121212; /* page bg */
  --graphite:       #1A1A1A; /* surface / card */
  --slate:          #222222; /* raised surface */
  --charcoal:       #2E2E2E; /* border / hover */
  --ash:            #3E3E3E; /* strong border */

  --ivory:          #F5F1EA; /* warm paper — primary fg on dark */
  --linen:          #E8E2D6; /* softer warm neutral */
  --bone:           #D4CCBA; /* muted warm */
  --stone:          #9A9288; /* secondary text */
  --smoke:          #6B6660; /* tertiary text */

  /* ----- Accent (crimson) ----- */
  --crimson:        #BE2328; /* primary accent — logo-icon hue, lifted */
  --crimson-bright: #D93036; /* interactive hover */
  --crimson-deep:   #8A191D; /* pressed / deep */
  --crimson-wash:   rgba(190, 35, 40, 0.12);

  /* ----- Semantic foreground (on dark surfaces) ----- */
  --fg-1: var(--ivory);     /* primary */
  --fg-2: var(--linen);     /* secondary headings */
  --fg-3: var(--stone);     /* body secondary */
  --fg-4: var(--smoke);     /* tertiary / captions */
  --fg-accent: var(--crimson);

  /* ----- Semantic background ----- */
  --bg-0: var(--obsidian);  /* absolute bg */
  --bg-1: var(--onyx);      /* page */
  --bg-2: var(--graphite);  /* card */
  --bg-3: var(--slate);     /* raised */
  --bg-accent: var(--crimson);

  /* ----- Borders ----- */
  --border-hairline: rgba(245, 241, 234, 0.08);
  --border-subtle:   rgba(245, 241, 234, 0.12);
  --border-strong:   rgba(245, 241, 234, 0.22);
  --border-accent:   var(--crimson);

  /* ----- Shadows (soft, atmospheric — like light on velvet) ----- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.5);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 0 1px rgba(245,241,234,0.04), 0 20px 50px rgba(0,0,0,0.55);

  /* ----- Radii — restrained, editorial ----- */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-pill: 999px;

  /* ----- Spacing scale ----- */
  --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;

  /* ----- Typography families -----
     Display: Playfair Display (high-contrast didone) — closest free match to
     the real Diamanté wordmark. Set UPPERCASE in production, tracked +0.1em.
     Secondary display: Cormorant Garamond italic, used sparingly for pull-quotes.
  */
  --font-display: 'Playfair Display', 'Didot', 'Bodoni 72', 'Times New Roman', serif;
  --font-display-italic: 'Cormorant Garamond', 'Playfair Display', Garamond, serif;
  --font-body:    'DIN Pro', 'Helvetica Neue', Arial, sans-serif;
  --font-ui:      'DIN Pro', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* ----- Type scale (desktop; see h-responsive below) ----- */
  --fs-display-1: 96px;  --lh-display-1: 0.95;
  --fs-display-2: 72px;  --lh-display-2: 1.00;
  --fs-h1:        56px;  --lh-h1:        1.05;
  --fs-h2:        40px;  --lh-h2:        1.10;
  --fs-h3:        28px;  --lh-h3:        1.20;
  --fs-h4:        20px;  --lh-h4:        1.30;
  --fs-body-lg:   18px;  --lh-body-lg:   1.60;
  --fs-body:      16px;  --lh-body:      1.65;
  --fs-body-sm:   14px;  --lh-body-sm:   1.55;
  --fs-caption:   12px;  --lh-caption:   1.40;
  --fs-eyebrow:   11px;  --lh-eyebrow:   1.20;

  /* ----- Letter spacing — the editorial signature ----- */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;
  --tracking-wider:  0.14em;   /* eyebrows, nav */
  --tracking-widest: 0.28em;   /* section labels */

  /* ----- Motion ----- */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-linen:   cubic-bezier(0.33, 1, 0.68, 1); /* slow, fabric-like */
  --dur-fast:     160ms;
  --dur-base:     280ms;
  --dur-slow:     520ms;
  --dur-drape:    800ms; /* for drape/reveal anims */
}

/* ============================================================
   Base defaults — consume the tokens above.
   ============================================================ */
html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: normal;
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
  letter-spacing: 0.02em;
}
h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tracking-tight); }
h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tracking-tight); }
h3, .h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
h4, .h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); }

.display-1 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-display-1); line-height: var(--lh-display-1); letter-spacing: 0.04em; text-transform: uppercase; }
.display-2 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-display-2); line-height: var(--lh-display-2); letter-spacing: 0.04em; text-transform: uppercase; }
.display-italic { font-family: var(--font-display-italic); font-style: italic; font-weight: 400; }

p, .body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  text-wrap: pretty;
}
.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }
.body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); color: var(--fg-3); }
.caption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--fg-4); letter-spacing: var(--tracking-wide); }

/* Eyebrow — the signature editorial micro-label */
.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-accent);
  font-weight: 500;
}
.eyebrow--muted { color: var(--fg-3); }

/* Nav / UI labels */
.ui-label {
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg-2);
}

/* Drop-cap — used to open editorial copy blocks */
.dropcap::first-letter {
  font-family: var(--font-display);
  font-weight: 500;
  float: left;
  font-size: 5.2em;
  line-height: 0.85;
  padding: 0.08em 0.12em 0 0;
  color: var(--fg-accent);
}

/* Rule — thin crimson accent line */
.rule-accent {
  width: 48px;
  height: 1px;
  background: var(--fg-accent);
  border: 0;
  margin: var(--space-5) 0;
}