/* ========================================================================
   IVORIS PALAIS — Colors & Type
   Modern luxury with heritage at its heart.
   ========================================================================
   Source-of-truth foundations: import this file FIRST in any artifact.
   ====================================================================== */

/* Cormorant Garamond, Manrope, and Caveat are listed as fallback families in
   the :root font-stack vars, but the locally-loaded Antiqua Caps / Neue
   Montreal / Emitha Script always resolve first. The old fonts.googleapis.com
   @imports below were therefore unused; removed to keep the critical request
   chain off third-party DNS. */

/* ------------------------------------------------------------------------
   Brand fonts (loaded locally) — ALL FOUR FAMILIES NOW INSTALLED:
     Antiqua Caps Regular  —  display / marque / headlines
     Neue Montreal         —  body / UX (Light, Regular + italics)
     Emitha Script         —  handwriting accent (signatures, dedications)
     Old Fashion Script    —  cursive accent (vows, statements)
   ---------------------------------------------------------------------- */

@font-face {
  font-family: 'Antiqua Caps';
  src: url('assets/fonts/AntiquaCaps-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Neue Montreal';
  src: url('assets/fonts/NeueMontreal-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Montreal';
  src: url('assets/fonts/NeueMontreal-LightItalic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Montreal';
  src: url('assets/fonts/NeueMontreal-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Montreal';
  src: url('assets/fonts/NeueMontreal-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Emitha Script';
  src: url('assets/fonts/EmithaScript-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Old Fashion Script';
  src: url('assets/fonts/OldFashionScript-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sunlight Script';
  src: url('assets/fonts/SunlightScript-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ===== CORE PALETTE — verbatim from brand strategy ===== */
  --ip-deep-wine:        #310a13;   /* primary — backgrounds, ink, marque */
  --ip-espresso-brown:   #2b1511;   /* secondary depth — alt dark surfaces */
  --ip-walnut-wood:      #5a3a26;   /* warm wood — accents, dividers */
  --ip-walnut-dark:      #3a2415;   /* darker walnut — deeper wood accent */
  --ip-olive-green:      #454411;   /* olive — quiet accent, matte */
  --ip-muted-brass:      #a98850;   /* brass — fine lines, foil moments */

  /* ===== NEUTRALS ===== */
  --ip-bone:             #efe7d6;   /* bone — soft surface, cards on cream */
  --ip-cream:            #fff9ec;   /* cream — primary light surface */
  --ip-cream-warm:       #f6ecd6;   /* warmed cream — alt surface */
  --ip-pearl:            #f3ede1;   /* pearl — softest surface */
  --ip-stone:            #d8cdb6;   /* aged stone — muted divider */

  /* ===== STONE / MATERIAL TONES (decorative) ===== */
  --ip-calacatta-viola:  #6b3a4a;   /* marble vein — soft secondary wine */
  --ip-green-onyx:       #3e4d3a;   /* green onyx — botanical accent */

  /* ===== SEMANTIC FOREGROUNDS ===== */
  --ip-fg-1:             var(--ip-deep-wine);     /* primary text */
  --ip-fg-2:             #4a2a2f;                 /* secondary text — softer wine */
  --ip-fg-3:             #7a5a5e;                 /* tertiary, captions */
  --ip-fg-4:             #a8908d;                 /* disabled / hairline labels */
  --ip-fg-on-dark-1:     var(--ip-cream);
  --ip-fg-on-dark-2:     #d8c8b4;
  --ip-fg-on-dark-3:     #a48f7e;

  /* ===== SEMANTIC SURFACES ===== */
  --ip-bg:               var(--ip-cream);
  --ip-bg-elevated:      var(--ip-pearl);
  --ip-bg-bone:          var(--ip-bone);
  --ip-bg-dark:          var(--ip-deep-wine);
  --ip-bg-dark-2:        var(--ip-espresso-brown);

  /* ===== LINES / STROKES ===== */
  --ip-line:             rgba(49, 10, 19, 0.16);   /* on cream */
  --ip-line-soft:        rgba(49, 10, 19, 0.08);
  --ip-line-on-dark:     rgba(255, 249, 236, 0.16);
  --ip-line-brass:       rgba(169, 136, 80, 0.55);

  /* ===== SHADOW SYSTEM — restrained, never theatrical ===== */
  --ip-shadow-1: 0 1px 2px rgba(43, 21, 17, 0.05);
  --ip-shadow-2: 0 4px 14px rgba(43, 21, 17, 0.07);
  --ip-shadow-3: 0 14px 40px rgba(43, 21, 17, 0.10);
  --ip-shadow-inner: inset 0 1px 0 rgba(255, 249, 236, 0.04);

  /* ===== RADII — minimal. Squared edges + structured arches ===== */
  --ip-radius-0: 0px;       /* default — squared edges */
  --ip-radius-1: 1px;
  --ip-radius-2: 2px;       /* hairline soften */
  --ip-radius-arch: 9999px; /* full pill — for arches & bottle caps only */

  /* ===== SPACING SCALE — generous, editorial ===== */
  --ip-space-1: 4px;
  --ip-space-2: 8px;
  --ip-space-3: 12px;
  --ip-space-4: 16px;
  --ip-space-5: 24px;
  --ip-space-6: 32px;
  --ip-space-7: 48px;
  --ip-space-8: 64px;
  --ip-space-9: 96px;
  --ip-space-10: 128px;
  --ip-space-11: 192px;

  /* ===== TYPE FAMILIES ===== */
  --ip-font-display: 'Antiqua Caps', 'Cormorant Garamond', 'Times New Roman', serif;
  --ip-font-body:    'Neue Montreal', 'Manrope', -apple-system, 'Helvetica Neue', sans-serif;
  --ip-font-hand:    'Emitha Script', 'Caveat', cursive;
  --ip-font-cursive: 'Old Fashion Script', 'Dom', 'Italianno', cursive;

  /* ===== TYPE SIZES — editorial scale ===== */
  --ip-size-marque:    clamp(64px, 12vw, 184px);   /* hero wordmark */
  --ip-size-display-1: clamp(48px, 7.5vw, 112px);  /* H1 / campaign titles */
  --ip-size-display-2: clamp(40px, 5.5vw, 80px);
  --ip-size-display-3: clamp(32px, 4vw, 56px);
  --ip-size-h1:        40px;
  --ip-size-h2:        32px;
  --ip-size-h3:        24px;
  --ip-size-h4:        20px;
  --ip-size-body:      15px;
  --ip-size-body-sm:   13px;
  --ip-size-caption:   11px;
  --ip-size-eyebrow:   10px;

  /* ===== LINE HEIGHTS ===== */
  --ip-lh-display:  1.04;
  --ip-lh-tight:    1.18;
  --ip-lh-body:     1.55;
  --ip-lh-relaxed:  1.7;

  /* ===== TRACKING — wide caps, neutral body ===== */
  --ip-track-marque:   0.06em;
  --ip-track-display:  0.02em;
  --ip-track-eyebrow:  0.28em;   /* generous, editorial */
  --ip-track-caps:     0.18em;
  --ip-track-body:     0.005em;

  /* ===== MOTION — slow, considered, never bouncy ===== */
  --ip-ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --ip-ease-soft:   cubic-bezier(0.32, 0.72, 0.30, 1.0);
  --ip-dur-1:       180ms;
  --ip-dur-2:       320ms;
  --ip-dur-3:       560ms;
  --ip-dur-veil:    900ms;       /* slow reveal */
}

/* ========================================================================
   SEMANTIC TYPE CLASSES
   ====================================================================== */

.ip-marque {
  font-family: var(--ip-font-display);
  font-weight: 400;
  font-size: var(--ip-size-marque);
  letter-spacing: var(--ip-track-marque);
  text-transform: uppercase;
  line-height: 1;
  color: var(--ip-fg-1);
}

.ip-display-1, .ip-h1 {
  font-family: var(--ip-font-display);
  font-weight: 400;
  font-size: var(--ip-size-display-1);
  line-height: var(--ip-lh-display);
  letter-spacing: var(--ip-track-display);
  color: var(--ip-fg-1);
}

.ip-display-2 {
  font-family: var(--ip-font-display);
  font-weight: 400;
  font-size: var(--ip-size-display-2);
  line-height: var(--ip-lh-tight);
  letter-spacing: var(--ip-track-display);
  color: var(--ip-fg-1);
}

.ip-display-3, .ip-h2 {
  font-family: var(--ip-font-display);
  font-weight: 400;
  font-size: var(--ip-size-display-3);
  line-height: var(--ip-lh-tight);
  letter-spacing: var(--ip-track-display);
  color: var(--ip-fg-1);
}

.ip-h3 {
  font-family: var(--ip-font-display);
  font-weight: 500;
  font-size: var(--ip-size-h3);
  line-height: 1.25;
  color: var(--ip-fg-1);
}

.ip-h4 {
  font-family: var(--ip-font-body);
  font-weight: 500;
  font-size: var(--ip-size-h4);
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--ip-fg-1);
}

.ip-eyebrow {
  font-family: var(--ip-font-body);
  font-weight: 500;
  font-size: var(--ip-size-eyebrow);
  letter-spacing: var(--ip-track-eyebrow);
  text-transform: uppercase;
  color: var(--ip-fg-3);
}

.ip-caps {
  font-family: var(--ip-font-body);
  font-weight: 500;
  letter-spacing: var(--ip-track-caps);
  text-transform: uppercase;
  font-size: var(--ip-size-caption);
  color: var(--ip-fg-2);
}

.ip-body {
  font-family: var(--ip-font-body);
  font-weight: 400;
  font-size: var(--ip-size-body);
  line-height: var(--ip-lh-body);
  letter-spacing: var(--ip-track-body);
  color: var(--ip-fg-2);
  text-wrap: pretty;
}

.ip-body-lg {
  font-family: var(--ip-font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: var(--ip-lh-relaxed);
  letter-spacing: var(--ip-track-body);
  color: var(--ip-fg-2);
}

.ip-body-sm {
  font-family: var(--ip-font-body);
  font-weight: 400;
  font-size: var(--ip-size-body-sm);
  line-height: 1.6;
  color: var(--ip-fg-2);
}

.ip-caption {
  font-family: var(--ip-font-body);
  font-weight: 400;
  font-size: var(--ip-size-caption);
  line-height: 1.5;
  color: var(--ip-fg-3);
  letter-spacing: 0.01em;
}

.ip-italic {
  font-family: var(--ip-font-display);
  font-style: italic;
  font-weight: 400;
}

.ip-hand {
  font-family: var(--ip-font-hand);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
  color: var(--ip-fg-2);
}

.ip-cursive {
  font-family: var(--ip-font-cursive);
  font-weight: 400;
  font-size: 56px;
  line-height: 1;
  color: var(--ip-fg-1);
}

/* ========================================================================
   SURFACE UTILITIES
   ====================================================================== */

.ip-on-dark {
  background: var(--ip-bg-dark);
  color: var(--ip-fg-on-dark-1);
}
.ip-on-dark .ip-body,
.ip-on-dark .ip-body-lg,
.ip-on-dark .ip-body-sm { color: var(--ip-fg-on-dark-2); }
.ip-on-dark .ip-eyebrow,
.ip-on-dark .ip-caps     { color: var(--ip-fg-on-dark-3); }
.ip-on-dark .ip-display-1,
.ip-on-dark .ip-display-2,
.ip-on-dark .ip-display-3,
.ip-on-dark .ip-h1,
.ip-on-dark .ip-h2,
.ip-on-dark .ip-h3,
.ip-on-dark .ip-h4,
.ip-on-dark .ip-marque   { color: var(--ip-fg-on-dark-1); }

/* The "grain" texture — applied as overlay for depth on dark surfaces */
.ip-grain {
  position: relative;
}
.ip-grain::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url('assets/texture-grain-wine.png');
  background-size: 320px;
  opacity: 0.5;
  mix-blend-mode: overlay;
}