/* =========================================================
   Natalia Luis Studio — Foundations
   Colors & Type tokens. Import once at the root of any doc.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Italiana&family=Pinyon+Script&family=Alex+Brush&family=Inter+Tight:wght@300;400;500;600&display=swap');

:root {
  /* ---------- COLOR — Neutrals (the canvas) ---------- */
  --paper:        #F4EFE7;  /* primary surface, warm off-white, like raw linen / plaster */
  --paper-soft:   #EBE3D6;  /* secondary surface, oat */
  --paper-deep:   #DDD1BF;  /* tertiary surface, pale sand */
  --plaster:      #E8D9C6;  /* pinkish stucco, warm highlight */
  --bone:         #F9F5EE;  /* lightest neutral, paper edges */
  --ink:          #1C1714;  /* near-black, warm espresso */
  --ink-soft:     #3A322C;  /* softer espresso, heading text */
  --stone:        #6B5F55;  /* mid neutral, body on deep */
  --stone-soft:   #9A8E82;  /* muted taupe, captions, meta */
  --line:         #C7B9A6;  /* hairline rules, dividers */
  --line-soft:    #E0D4C2;  /* subtle dividers */

  /* ---------- COLOR — Accents (used sparingly, with intent) ---------- */
  /* Signature accent: DUSTY ROSE PINK (sampled from studio backdrop).
     The old burgundy tokens are kept as aliases so existing components
     continue to work — they now resolve to rose. */
  --rose:         #A96871;  /* PRIMARY ACCENT — dusty rose, the studio wall */
  --rose-deep:    #8E4E58;  /* pressed / darker rose (hover) */
  --rose-ink:     #5E2F38;  /* near-black rose — footer, deep surfaces */
  --rose-mist:    #E7C5CB;  /* atmospheric wash, panels, backgrounds */
  --rose-soft:    #D9A9B2;  /* secondary pink, lighter than signature */

  /* Back-compat: burgundy tokens now resolve to rose so old CSS keeps working. */
  --burgundy:     var(--rose);
  --burgundy-deep:var(--rose-deep);
  --burgundy-ink: var(--rose-ink);

  --brass:        #A8874B;  /* gilded metallic */
  --brass-soft:   #C7A871;  /* lighter brass highlight */
  --terracotta:   #B6583C;  /* warm clay, tertiary accent */
  --rose-plaster: #D8A598;  /* blush highlight (see bedroom) */
  --lilac:        #B6A8C9;  /* muted violet velvet accent */
  --sky-velvet:   #7E99B3;  /* dusty blue piping accent */
  --viridian:     #4F6B5E;  /* deep botanical green accent */
  --klein:        #1B2FB0;  /* cobalt punctuation (see illustration) */

  /* ---------- SEMANTIC ---------- */
  --bg:           var(--paper);
  --bg-alt:       var(--paper-soft);
  --bg-deep:      var(--rose-ink);
  --bg-rose:      var(--rose);        /* hero pink backdrop */
  --bg-rose-mist: var(--rose-mist);   /* soft pink wash for sections */
  --fg:           var(--ink);
  --fg-soft:      var(--ink-soft);
  --fg-muted:     var(--stone);
  --fg-quiet:     var(--stone-soft);
  --fg-on-dark:   var(--bone);
  --accent:       var(--rose);
  --accent-deep:  var(--rose-deep);
  --accent-gilt:  var(--brass);
  --rule:         var(--line);
  --rule-soft:    var(--line-soft);

  /* ---------- TYPE — Families ---------- */
  --font-display: 'Italiana', 'Didot', 'Bodoni 72', serif;          /* high-contrast didone, cover moments */
  --font-serif:   'Cormorant Garamond', 'Garamond', Georgia, serif; /* workhorse editorial serif */
  --font-script:  'Pinyon Script', 'Snell Roundhand', cursive;      /* formal script / sentimental accents */
  --font-hand:    'Alex Brush', 'Bradley Hand', cursive;             /* hand-lettered brush — Natalia's signature */
  --font-sans:    'Inter Tight', ui-sans-serif, system-ui, sans-serif; /* UI, captions, meta */

  /* ---------- TYPE — Fluid scale (desktop-first, 1440 baseline) ---------- */
  --fs-xs:        12px;   /* micro eyebrow */
  --fs-sm:        14px;   /* meta */
  --fs-base:      16px;   /* ui */
  --fs-body:      18px;   /* serif body */
  --fs-lead:      22px;   /* lead paragraph */
  --fs-h6:        16px;
  --fs-h5:        20px;
  --fs-h4:        28px;
  --fs-h3:        40px;
  --fs-h2:        64px;
  --fs-h1:        96px;
  --fs-display:   140px;  /* cover hero */

  --lh-tight:     1.04;
  --lh-snug:      1.18;
  --lh-body:      1.55;
  --lh-loose:     1.75;

  /* Tracking — serif display wants negative tracking, sans caps want positive */
  --tr-tight:     -0.02em;
  --tr-normal:    0;
  --tr-wide:      0.08em;
  --tr-wider:     0.18em;   /* eyebrow SMALL CAPS */
  --tr-widest:    0.32em;

  /* ---------- SPACING ---------- */
  --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;

  /* ---------- RADII — generous arches, never pill-on-everything ---------- */
  --r-none:   0;
  --r-xs:     2px;
  --r-sm:     4px;
  --r-md:     8px;
  --r-lg:     16px;
  --r-arch:   999px 999px 0 0;  /* soft arch (see bedroom headboard) */
  --r-pill:   999px;

  /* ---------- SHADOWS — soft, ambient, never punchy ---------- */
  --shadow-whisper: 0 1px 2px rgba(28,23,20,0.04);
  --shadow-soft:    0 6px 24px -12px rgba(28,23,20,0.14);
  --shadow-room:    0 28px 60px -32px rgba(28,23,20,0.22);
  --shadow-deep:    0 48px 80px -40px rgba(28,23,20,0.30);

  /* ---------- MOTION ---------- */
  --ease-silk:    cubic-bezier(0.22, 0.61, 0.36, 1);     /* default */
  --ease-linen:   cubic-bezier(0.65, 0.05, 0.36, 1);     /* fabric settle */
  --dur-fast:     180ms;
  --dur-base:     380ms;
  --dur-slow:     720ms;
  --dur-curtain:  1200ms;  /* hero reveals, image dissolves */
}

/* ======================================================
   Base element styles — editorial, never flashy
   Import as foundation, then override per-component.
   ====================================================== */

html { color-scheme: light; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Display & headings ---- */
.h-display,
.cover-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg);
}

h1, .h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  margin: 0;
}

h5, .h5 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h5);
  line-height: var(--lh-snug);
  margin: 0;
}

/* ---- Eyebrow — the single most-used label style ---- */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--fg-muted);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

/* ---- Body & editorial ---- */
p, .body {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-soft);
  text-wrap: pretty;
  margin: 0 0 1em;
}

.lead {
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  font-weight: 300;
  color: var(--fg-soft);
  font-style: italic;
}

.meta, small, .caption {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--fg-muted);
  letter-spacing: 0;
}

.signature {
  font-family: var(--font-script);
  font-weight: 400;
  color: var(--accent);
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1;
}

/* Drop cap moment — for long-form editorial */
.dropcap::first-letter {
  font-family: var(--font-display);
  float: left;
  font-size: 5.2em;
  line-height: 0.85;
  padding: 0.08em 0.12em 0 0;
  color: var(--accent);
}

/* ---- Links ---- */
a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--dur-base) var(--ease-silk), color var(--dur-fast) var(--ease-silk);
}
a:hover { color: var(--accent); }

/* ---- Hairline rule ---- */
hr, .rule {
  border: 0;
  height: 1px;
  background: var(--rule);
  margin: var(--s-7) 0;
}

/* ---- Selection ---- */
::selection { background: var(--rose); color: var(--bone); }