/* ============================================================
   Noblesse — Integrative Therapy
   Colors & Type tokens
   Source: Brand Identity Guidelines (Kristien Noblesse, 2023/24,
   designed by Céline van Aerde — celinevanaerde@gmail.com)
   ============================================================ */

/* ---------- FONTS ----------
   Original brand fonts:
     • Natural Cadence (display serif) — licensed; cannot be
       redistributed. Substituted on the web with Cormorant
       Garamond (elegant high-contrast serif, closest free match).
       FLAG: ask Kristien / Céline for the web-licensed
       Natural Cadence files if available.
     • Montserrat (body) — open font license, loaded from Google Fonts.
---------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=JetBrains+Mono:wght@400;500&family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
  /* ----- BRAND PALETTE (exact hex from guidelines page 2) ----- */
  --noblesse-cream:        #fff4ea; /* canvas / off-white */
  --noblesse-burgundy:     #660000; /* primary mark color */
  --noblesse-coral:        #ff784a; /* warm accent */
  --noblesse-sienna:       #a33308; /* deep warm */
  --noblesse-terracotta:   #cf5938; /* mid warm */
  --noblesse-amber:        #ff9933; /* bright warm */
  --noblesse-sky:          #a3d4fc; /* soft cool */
  --noblesse-blue:         #4580cc; /* mid cool */
  --noblesse-indigo:       #330099; /* deep cool */
  --noblesse-teal:         #80adbd; /* dusty cool */

  /* ----- TONAL EXTENSIONS (derived for UI surfaces) ----- */
  --cream-50:  #fffaf3;
  --cream-100: #fff4ea;
  --cream-200: #f7e9d8;
  --cream-300: #ecdac3;
  --cream-400: #d9c4a6;

  --burgundy-50:  #f7eaea;
  --burgundy-100: #e8c9c9;
  --burgundy-200: #c98a8a;
  --burgundy-400: #8a2222;
  --burgundy-500: #660000;
  --burgundy-600: #500000;
  --burgundy-700: #3a0000;

  --warm-50:  #fff1e8;
  --warm-100: #ffe0cc;
  --warm-200: #ffc199;
  --warm-300: #ff9966;
  --warm-400: #ff784a;
  --warm-500: #cf5938;
  --warm-600: #a33308;

  /* ----- SEMANTIC SURFACES ----- */
  --bg-page:     var(--cream-100);
  --bg-elevated: #ffffff;
  --bg-sunken:   var(--cream-200);
  --bg-inverse:  var(--burgundy-500);

  /* ----- SEMANTIC INK / FG ----- */
  --fg-1: #2a1414;            /* primary text — warm near-black */
  --fg-2: #5a3a3a;            /* secondary text */
  --fg-3: #8a6e6e;            /* tertiary / captions */
  --fg-muted: #b39d9d;        /* placeholders, decorative */
  --fg-on-burgundy: #fff4ea;  /* text on burgundy */
  --fg-brand: var(--burgundy-500);

  /* ----- BORDERS / LINES ----- */
  --line-soft:   rgba(102, 0, 0, 0.10);
  --line-medium: rgba(102, 0, 0, 0.22);
  --line-strong: rgba(102, 0, 0, 0.45);
  --line-hairline: rgba(42, 20, 20, 0.08);

  /* ----- SEMANTIC ACCENTS (warm-led palette) ----- */
  --accent-primary:   var(--burgundy-500);
  --accent-warm:      var(--noblesse-terracotta);
  --accent-glow:      var(--noblesse-amber);
  --accent-quiet:     var(--noblesse-teal);
  --accent-info:      var(--noblesse-blue);

  /* Feedback (kept warm) */
  --success: #6b8e4e;   /* sage — warmer than typical green */
  --warning: var(--noblesse-amber);
  --danger:  var(--noblesse-sienna);

  /* ----- TYPOGRAPHY FAMILIES ----- */
  --font-display: 'Cormorant Garamond', 'Natural Cadence', 'Cormorant', Georgia, 'Times New Roman', serif;
  --font-body:    'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ----- TYPE SCALE (display + body) -----  @kind font */
  --fs-display-1: clamp(56px, 8vw, 112px); /* @kind font */
  --fs-display-2: clamp(44px, 6vw, 80px); /* @kind font */
  --fs-h1: clamp(36px, 4.5vw, 56px); /* @kind font */
  --fs-h2: clamp(28px, 3.2vw, 40px); /* @kind font */
  --fs-h3: 24px; /* @kind font */
  --fs-h4: 20px; /* @kind font */
  --fs-body-lg: 18px; /* @kind font */
  --fs-body:    16px; /* @kind font */
  --fs-body-sm: 14px; /* @kind font */
  --fs-caption: 12px; /* @kind font */
  --fs-eyebrow: 11px; /* @kind font */

  /* ----- LINE HEIGHTS ----- */
  --lh-display: 1.05; /* @kind font */
  --lh-heading: 1.18; /* @kind font */
  --lh-body:    1.65; /* @kind font */
  --lh-tight:   1.3; /* @kind font */

  /* ----- LETTER SPACING ----- */
  /* --tracking-eyebrow is the brand's signature wide tracking, used on "INTEGRATIVE THERAPY" */
  --tracking-eyebrow: 0.28em; /* @kind font */
  --tracking-caps:    0.18em; /* @kind font */
  --tracking-display: -0.01em; /* @kind font */
  --tracking-body:    0; /* @kind font */

  /* ----- WEIGHTS ----- */
  --w-light:    300; /* @kind font */
  --w-regular:  400; /* @kind font */
  --w-medium:   500; /* @kind font */
  --w-semibold: 600; /* @kind font */
  --w-bold:     700; /* @kind font */

  /* ----- RADII ----- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ----- SHADOWS (soft, warm-tinted) ----- */
  --shadow-1: 0 1px 2px rgba(102, 0, 0, 0.05), 0 1px 1px rgba(102, 0, 0, 0.04);
  --shadow-2: 0 6px 14px -8px rgba(102, 0, 0, 0.18), 0 2px 4px rgba(102, 0, 0, 0.05);
  --shadow-3: 0 18px 40px -20px rgba(102, 0, 0, 0.22), 0 4px 10px rgba(102, 0, 0, 0.06);
  --shadow-inset: inset 0 0 0 1px var(--line-soft);

  /* ----- SPACING (8pt-friendly with extra micro steps) ----- */
  --s-0: 0; /* @kind 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;

  /* ----- MOTION ----- */
  --ease-soft: cubic-bezier(0.4, 0.0, 0.2, 1); /* @kind other */
  --ease-out:  cubic-bezier(0.16, 0.84, 0.32, 1); /* @kind other */
  --dur-fast:    140ms; /* @kind other */
  --dur-normal:  240ms; /* @kind other */
  --dur-slow:    420ms; /* @kind other */
}

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

html, body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Display serif — used for hero phrases, page titles. lowercase
   is intentional and on-brand (see the wordmark "noblesse"). */
.display-1, .display-2, h1, h2 {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  letter-spacing: var(--tracking-display);
  color: var(--fg-brand);
}

.display-1 {
  font-size: var(--fs-display-1);
  line-height: var(--lh-display);
  text-wrap: balance;
}

.display-2 {
  font-size: var(--fs-display-2);
  line-height: var(--lh-display);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  margin: 0 0 var(--s-4);
}

h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  margin: 0 0 var(--s-3);
}

h3 {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  color: var(--fg-1);
  margin: 0 0 var(--s-2);
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: var(--w-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-tight);
  letter-spacing: 0.01em;
  color: var(--fg-1);
  margin: 0 0 var(--s-2);
}

p, .body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); margin: 0 0 var(--s-4); }
.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--fg-2); }
.body-sm { font-size: var(--fs-body-sm); line-height: 1.55; color: var(--fg-2); }
.caption { font-size: var(--fs-caption); line-height: 1.45; color: var(--fg-3); }

/* Signature wide-tracked, all-caps small label — used on logo
   strapline "INTEGRATIVE THERAPY" and section eyebrows. */
.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--burgundy-500);
}

.quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--w-regular);
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.35;
  color: var(--fg-brand);
  text-wrap: balance;
}

a {
  color: var(--burgundy-500);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--dur-fast) var(--ease-soft);
}
a:hover { color: var(--noblesse-terracotta); }

::selection { background: var(--burgundy-500); color: var(--cream-100); }