/* ============================================================
   Liora Interior Design — Foundations
   Salbeigrün · Puderblau · Blush · warmes Gold auf Creme.
   ============================================================ */

:root {
  /* ---------- Colors ---------- */

  /* Warm neutral surfaces — kept calm, never compete with the pastels */
  --paper:        #F8F4ED;   /* page — warm cream */
  --ivory:        #FDFAF4;   /* card / secondary surface */
  --linen:        #F1EAD9;   /* section band */
  --pearl:        #FFFDF9;   /* highest surface (modals, nav scrolled) */
  --sand:         #E4D9C2;   /* hairline borders */

  /* Pastel accents — straight from the brand mark */
  --blush:        #ECCFC8;   /* pastel rose (LD monogram) */
  --blush-soft:   #F5E3DE;   /* tints / washes */
  --sage:         #BFD0AA;   /* pastel laurel green */
  --sage-soft:    #D9E3C7;
  --powder:       #BFCEDA;   /* pastel blue (LIORA wordmark, walls) */
  --powder-soft:  #D7E0E8;
  --gold:         #C5A368;   /* oval frame, crown */
  --gold-soft:    #DEC79B;
  --gold-deep:    #A6814A;   /* link / pressed gold */

  /* Type */
  --ink:          #3D4A57;   /* body text — dusty slate blue (LIORA color) */
  --ink-soft:     #6B7B8B;   /* secondary text */
  --ink-mute:     #97A2AE;   /* tertiary text, meta */
  --espresso:     #4A3E36;   /* very rare — for warm headings on blush */

  /* Semantic aliases */
  --bg:           var(--paper);
  --bg-card:      var(--ivory);
  --fg1:          var(--ink);
  --fg2:          var(--ink-soft);
  --fg3:          var(--ink-mute);
  --border:       var(--sand);
  --link:         var(--gold-deep);
  --accent:       var(--gold);

  /* Status — desaturated, brand-tinted */
  --success:      #8AA078;
  --warning:      #C5A368;
  --error:        #C58A88;

  /* ---------- Typography ---------- */

  --font-display:  'Cormorant Garamond', 'Garamond', 'Times New Roman', serif;
  --font-caps:     'Cinzel', 'Trajan Pro', 'Cormorant Garamond', serif;   /* for LIORA-style caps wordmark */
  --font-script:   'Italianno', 'Allura', 'Edwardian Script ITC', cursive; /* signature & romantic accents */
  --font-body:     'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:     ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale — major third (1.250) */
  --fs-12:  0.75rem;
  --fs-14:  0.875rem;
  --fs-16:  1rem;
  --fs-18:  1.125rem;
  --fs-20:  1.25rem;
  --fs-24:  1.5rem;
  --fs-30:  1.875rem;
  --fs-38:  2.375rem;
  --fs-48:  3rem;
  --fs-64:  4rem;
  --fs-88:  5.5rem;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  --tracking-tight:  -0.01em;
  --tracking-snug:   -0.005em;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.22em;     /* Cinzel-style wide caps */
  --tracking-eyebrow: 0.18em;

  /* ---------- Spacing — 4px base ---------- */
  --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;

  --section-y:        96px;
  --section-y-tablet: 64px;
  --section-y-mobile: 48px;

  --container-max: 1200px;
  --container-pad: 32px;
  --measure:       62ch;

  /* ---------- Radii ---------- */
  /* Rounded but not pill — the romantic brand asks for soft, not slick. */
  --radius-sm:    6px;
  --radius:       14px;   /* default — buttons, cards, image frames */
  --radius-lg:    24px;
  --radius-xl:    36px;   /* large cards, image plinths */
  --radius-pill:  999px;  /* tags & chips only */

  /* ---------- Elevation — softer, tinted shadows ---------- */
  --shadow-lift:     0 2px 4px rgba(61, 74, 87, 0.04), 0 12px 32px -12px rgba(61, 74, 87, 0.10);
  --shadow-floating: 0 30px 70px -24px rgba(61, 74, 87, 0.18);
  --shadow-blush:    0 16px 48px -20px rgba(232, 197, 194, 0.55);  /* halo on blush cards */
  --shadow-sage:     0 16px 48px -20px rgba(191, 208, 170, 0.55);

  /* ---------- Motion ---------- */
  --ease:           cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:       120ms;
  --dur:            200ms;
  --dur-slow:       400ms;
  --dur-image:      600ms;
}

/* ============================================================
   Element defaults
   ============================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-snug);
  margin: 0 0 var(--space-4);
}
h1 { font-size: clamp(var(--fs-48), 6vw, var(--fs-88)); font-weight: 400; }
h2 { font-size: clamp(var(--fs-38), 4.5vw, var(--fs-64)); font-weight: 400; }
h3 { font-size: var(--fs-38); }
h4 { font-size: var(--fs-30); }
h5 { font-size: var(--fs-24); }
h6 { font-size: var(--fs-20); font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }

h1 em, h2 em, h3 em, h4 em, h5 em, h6 em { color: inherit; font-style: italic; }

/* Caps wordmark — Cinzel — never inline with body */
.wordmark, .caps {
  font-family: var(--font-caps);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

p { margin: 0 0 var(--space-4); max-width: var(--measure); }
p.lede { font-size: var(--fs-18); line-height: var(--lh-relaxed); color: var(--ink-soft); }
small, .small { font-size: var(--fs-14); color: var(--ink-soft); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--gold-deep);
  margin: 0 0 var(--space-3);
}

/* Romantic script accent — extremely sparing! signatures only. */
.script {
  font-family: var(--font-script);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(36px, 4vw, 56px);
  color: var(--gold-deep);
  line-height: 1;
}
.signature {
  font-family: var(--font-script);
  font-size: 48px;
  color: var(--gold-deep);
  line-height: 1;
}

a {
  color: var(--gold-deep);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--dur-slow) var(--ease), color var(--dur) var(--ease);
}
a:hover { background-size: 100% 1px; }

hr {
  border: 0; height: 1px; width: 64px;
  background: var(--gold); margin: var(--space-7) auto;
}

::selection { background: var(--blush); color: var(--ink); }

/* Soft image frame — base. Pair with .frame-ornate for the gold border. */
.frame {
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--ivory);
}
.frame-ornate {
  padding: 14px;
  background: var(--ivory);
  border-radius: calc(var(--radius-xl) + 6px);
  box-shadow:
    inset 0 0 0 1px var(--gold),
    inset 0 0 0 6px var(--ivory),
    inset 0 0 0 7px var(--gold-soft),
    var(--shadow-lift);
}
.frame-ornate > img,
.frame-ornate > .inner {
  border-radius: var(--radius-lg);
  display: block;
  width: 100%;
  height: auto;
}

/* Utility */
.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); }
.section { padding-block: var(--section-y); }
@media (max-width: 900px) { .section { padding-block: var(--section-y-tablet); } }
@media (max-width: 600px) { .section { padding-block: var(--section-y-mobile); } }