/* =============================================================
   FERELLA INTERIORS — Colors & Typography
   Quiet Luxury. Curated Design.
   ============================================================= */

/* ---- Webfonts ---- */
/* Cormorant Garamond — editorial serif (display + headlines).
   Substitute: closest open match to refined publishing serifs
   used by studios like Vincent Van Duysen / Aman / Six Senses.
   Replace with the studio's licensed serif if/when available. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&family=Inter:wght@300;400;500;600&display=swap');

:root {
  /* =========================================================
     COLOR — Naturtöne, gedeckt, warm
     ========================================================= */

  /* Off-whites & sand (page backgrounds, surfaces) */
  --ferella-bone:        #F5F1EA;  /* Page default — warm off-white */
  --ferella-paper:       #EDE7DD;  /* Surface, secondary panels */
  --ferella-sand:        #E2D9C9;  /* Accent surface, dividers' soft side */
  --ferella-linen:       #D8CDB8;  /* Stronger sand */

  /* Greige & taupe (the heart of the palette) */
  --ferella-greige:      #B6A88E;  /* Brand mid-tone — warm taupe */
  --ferella-stone:       #9C8E76;  /* Stone */
  --ferella-taupe:       #7E6F58;  /* Deep warm taupe */
  --ferella-clay:        #6B5C45;  /* Earth, warmer espresso bridge */

  /* Dark earths (text, contrast) */
  --ferella-espresso:    #3E342A;  /* Body text alt, deep warm brown */
  --ferella-chocolate:   #2A2118;  /* Heading dark on light */
  --ferella-slate:       #2C2C2A;  /* Near-black, slight warm tilt */
  --ferella-ink:         #14110D;  /* Used very sparingly — true accent */

  /* Cool greys for night-mode interiors (used in imagery) */
  --ferella-mist:        #BDB7AE;
  --ferella-shadow:      #4B463E;

  /* =========================================================
     SEMANTIC TOKENS (UI use these, not raw colors)
     ========================================================= */

  /* Backgrounds */
  --bg:                  var(--ferella-bone);
  --bg-soft:             var(--ferella-paper);
  --bg-raised:           #FBF8F2;        /* slightly brighter than bone */
  --bg-inverse:          var(--ferella-chocolate);

  /* Foregrounds (text) */
  --fg:                  var(--ferella-chocolate);
  --fg-muted:            var(--ferella-taupe);
  --fg-soft:             var(--ferella-stone);
  --fg-on-dark:          #EDE7DD;
  --fg-on-dark-muted:    #B6A88E;

  /* Borders — always hairline, low contrast */
  --border:              rgba(42, 33, 24, 0.14);
  --border-soft:         rgba(42, 33, 24, 0.08);
  --border-strong:       rgba(42, 33, 24, 0.30);
  --border-on-dark:      rgba(237, 231, 221, 0.18);

  /* Accent — used sparingly, never gaudy */
  --accent:              var(--ferella-taupe);
  --accent-ink:          var(--ferella-chocolate);

  /* States */
  --hover-overlay:       rgba(42, 33, 24, 0.04);
  --press-overlay:       rgba(42, 33, 24, 0.08);
  --focus-ring:          rgba(126, 111, 88, 0.45);

  /* =========================================================
     TYPOGRAPHY
     ========================================================= */

  --font-serif:          'Cormorant Garamond', 'EB Garamond',
                         'Garamond', 'Times New Roman', serif;
  --font-sans:           'Inter', 'Helvetica Neue', 'Helvetica',
                         'Arial', system-ui, sans-serif;

  /* Type scale (editorial, generous) */
  --fs-display:          clamp(56px, 7vw, 112px);  /* hero serif */
  --fs-h1:               clamp(40px, 4.5vw, 72px);
  --fs-h2:               clamp(32px, 3vw, 48px);
  --fs-h3:               clamp(22px, 1.6vw, 28px);
  --fs-body-lg:          18px;
  --fs-body:             16px;
  --fs-body-sm:          14px;
  --fs-caption:          12px;
  --fs-eyebrow:          11px;          /* tracked uppercase */

  /* Line heights — slow reading rhythm */
  --lh-tight:            1.05;
  --lh-snug:             1.18;
  --lh-normal:           1.55;
  --lh-relaxed:          1.7;

  /* Letter-spacing — versalien get LOTS of tracking */
  --ls-display:          0.04em;
  --ls-eyebrow:          0.32em;        /* "FERELLA INTERIORS" tracking */
  --ls-button:           0.22em;
  --ls-tight:            -0.01em;

  /* Weights — editorial restraint, prefer light/regular */
  --fw-light:            300;
  --fw-regular:          400;
  --fw-medium:           500;
  --fw-semibold:         600;

  /* =========================================================
     SPACING — generous, magazine-like
     ========================================================= */
  --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;
  --space-11:  192px;

  /* =========================================================
     BORDERS / RADII / SHADOWS
     ========================================================= */
  --radius-none:   0px;
  --radius-xs:     2px;
  --radius-sm:     4px;
  --radius-md:     8px;       /* maximum used; rarely */
  --radius-pill:   999px;

  --hairline:      1px solid var(--border);
  --hairline-soft: 1px solid var(--border-soft);

  /* Shadows are barely-there. Avoid drop-shadow look. */
  --shadow-none:   none;
  --shadow-soft:   0 1px 0 rgba(42,33,24,0.04);
  --shadow-card:   0 2px 24px -12px rgba(42,33,24,0.18);
  --shadow-modal:  0 30px 80px -30px rgba(42,33,24,0.35);

  /* Motion — slow & sanft */
  --ease-quiet:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-1:         180ms;
  --dur-2:         320ms;
  --dur-3:         600ms;
  --dur-4:         1000ms;
}

/* =============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================= */

html { color: var(--fg); background: var(--bg); }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  font-weight: var(--fw-regular);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display & headlines — serif, light weight, generous tracking */
.display, h1.display {
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--fg);
}

h1 {
  font-family: var(--font-serif);
  font-size: var(--fs-h1);
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  margin: 0;
}

h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: var(--fw-light);
  line-height: var(--lh-snug);
  letter-spacing: 0.01em;
  margin: 0;
}

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

/* The signature treatment: tracked, uppercase, sans (or serif) */
.eyebrow, .ferella-mark {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.brand-wordmark {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  text-wrap: pretty;
}

.lede {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  font-style: italic;
}

.caption {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--fg-soft);
  letter-spacing: 0.04em;
}

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

/* Buttons — outline only or text-link. Never filled brights. */
.btn {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-button);
  padding: 14px 28px;
  border: 1px solid var(--fg);
  background: transparent;
  color: var(--fg);
  border-radius: 0;
  cursor: pointer;
  transition: background var(--dur-2) var(--ease-quiet),
              color var(--dur-2) var(--ease-quiet);
}
.btn:hover { background: var(--fg); color: var(--fg-on-dark); }

.btn--ghost { border-color: var(--border-strong); }
.btn--text {
  border: 0;
  padding: 0 0 4px 0;
  border-bottom: 1px solid var(--fg);
  background: transparent;
}