/* =========================================================
   CRESTPOINT HOLDINGS — TOKENS
   colors_and_type.css
   Import once at the top of any page in this design system.
   ========================================================= */

/* ---- Web fonts ----
   ⚠️ FONT SUBSTITUTION FLAG
   No proprietary type was supplied. The system uses four Google Fonts:
     - Bodoni Moda          (display didone)
     - Cormorant Garamond   (serif body / pull quotes)
     - Inter Tight          (sans UI body)
     - JetBrains Mono       (mono figures / code)
   Replace the @import with self-hosted @font-face rules in fonts/ when the
   licensed type is delivered.
*/
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,400;6..96,500;6..96,600;6..96,700;6..96,800&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- COLOUR ---------- */
  /* Ink ladder — primary text & dark surfaces */
  --ink-900: #0B0F14;
  --ink-700: #1F262E;
  --ink-500: #4A5560;
  --ink-300: #8B95A1;
  --ink-100: #D7D2C8;

  /* Bone ladder — the page itself */
  --bone-50:  #F5F1EA;
  --bone-100: #EAE4D8;
  --paper:    #FBF9F4;

  /* Brass — the single accent */
  --brass-700: #6E5430;
  --brass-600: #8C6B3D;
  --brass-500: #A88B5C;
  --brass-300: #C8B388;
  --brass-200: #E5D7B8;

  /* Sector accents — used only on portfolio tags / dossier headers */
  --sector-realestate:  #1F3B2D;
  --sector-hospitality: #5C2A24;
  --sector-fitness:     #2D3A4A;
  --sector-capital:     #3B3525;

  /* State */
  --success: #3F6B4E;
  --warn:    #8A6A1F;
  --danger:  #7A2E2A;

  /* Semantic aliases */
  --fg:          var(--ink-900);
  --fg-emph:     var(--ink-700);
  --fg-muted:    var(--ink-500);
  --fg-meta:     var(--ink-300);
  --bg:          var(--bone-50);
  --bg-card:     var(--bone-100);
  --bg-paper:    var(--paper);
  --bg-inverse:  var(--ink-900);
  --fg-inverse:  var(--bone-50);
  --accent:      var(--brass-600);
  --accent-soft: var(--brass-200);
  --hairline:    var(--ink-100);
  --hairline-inverse: rgba(245, 241, 234, 0.14);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Bodoni Moda', 'Bodoni 72', 'Didot', 'Times New Roman', serif;
  --font-serif:   'Cormorant Garamond', 'EB Garamond', 'Iowan Old Style', Georgia, serif;
  --font-sans:    'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', 'Menlo', monospace;

  /* ---------- TYPE SCALE (1.250 ratio @ 16px) ---------- */
  --display-xl-size: 88px;
  --display-xl-lh:   0.95;
  --display-xl-track: -0.02em;

  --display-lg-size: 64px;
  --display-lg-lh:   1.0;
  --display-lg-track: -0.015em;

  --display-md-size: 44px;
  --display-md-lh:   1.05;
  --display-md-track: -0.01em;

  --serif-lg-size: 28px;
  --serif-lg-lh:   1.35;

  --serif-md-size: 20px;
  --serif-md-lh:   1.5;

  --body-size:     16px;
  --body-lh:       1.55;

  --body-sm-size:  14px;
  --body-sm-lh:    1.5;

  --eyebrow-size:  12px;
  --eyebrow-lh:    1.2;
  --eyebrow-track: 0.16em;

  --mono-md-size:  14px;
  --mono-md-lh:    1.5;

  --mono-sm-size:  11px;
  --mono-sm-lh:    1.4;
  --mono-sm-track: 0.04em;

  /* ---------- SPACING (8px base) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;   /* default inline gap */
  --space-6:  32px;
  --space-7:  48px;   /* block gap */
  --space-8:  64px;
  --space-9:  96px;   /* section gap */
  --space-10: 144px;  /* chapter gap */

  /* ---------- RADII ---------- */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-pill: 999px;

  /* ---------- RULES & BORDERS ---------- */
  --rule:          1px solid var(--hairline);
  --rule-strong:   1px solid var(--ink-300);
  --rule-inverse:  1px solid var(--hairline-inverse);

  /* ---------- SHADOWS ---------- */
  --shadow-pop:   0 1px 0 rgba(11,15,20,0.04), 0 12px 28px -10px rgba(11,15,20,0.18);
  --shadow-modal: 0 24px 64px -20px rgba(11,15,20,0.32);

  /* ---------- MOTION ---------- */
  --ease:        cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --dur-micro:   120ms;
  --dur-ui:      200ms;
  --dur-macro:   400ms;

  /* ---------- LAYOUT ---------- */
  --content-max:   1440px;
  --gutter:        24px;
  --page-margin:   80px;
  --masthead-h:    72px;
}

/* =========================================================
   BASE / SEMANTIC RESETS
   ========================================================= */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ----- HEADINGS ----- */
h1, .h1, .display-xl {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--display-xl-size);
  line-height: var(--display-xl-lh);
  letter-spacing: var(--display-xl-track);
  color: var(--fg);
  margin: 0;
}
h2, .h2, .display-lg {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--display-lg-size);
  line-height: var(--display-lg-lh);
  letter-spacing: var(--display-lg-track);
  margin: 0;
}
h3, .h3, .display-md {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--display-md-size);
  line-height: var(--display-md-lh);
  letter-spacing: var(--display-md-track);
  margin: 0;
}
.serif-lg, .lede {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--serif-lg-size);
  line-height: var(--serif-lg-lh);
}
.serif-md, .quote {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--serif-md-size);
  line-height: var(--serif-md-lh);
}
p, .body {
  font-family: var(--font-sans);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  color: var(--fg-emph);
  margin: 0 0 var(--space-4) 0;
  text-wrap: pretty;
}
.body-sm, small {
  font-family: var(--font-sans);
  font-size: var(--body-sm-size);
  line-height: var(--body-sm-lh);
  color: var(--fg-muted);
}
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--eyebrow-size);
  line-height: var(--eyebrow-lh);
  letter-spacing: var(--eyebrow-track);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg-muted);
}
.mono, code, kbd, pre, .data {
  font-family: var(--font-mono);
  font-size: var(--mono-md-size);
  line-height: var(--mono-md-lh);
}
.mono-sm {
  font-family: var(--font-mono);
  font-size: var(--mono-sm-size);
  line-height: var(--mono-sm-lh);
  letter-spacing: var(--mono-sm-track);
}

/* ----- LINKS ----- */
a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size var(--dur-ui) var(--ease);
}
a:hover {
  background-size: 100% 1px;
}
a.brass {
  color: var(--brass-700);
}
a.brass:hover {
  background-image: linear-gradient(var(--brass-600), var(--brass-600));
}

/* ----- BUTTONS ----- */
.btn {
  font-family: var(--font-sans);
  font-size: var(--body-sm-size);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 14px 24px;
  border: 1px solid var(--ink-900);
  background: var(--ink-900);
  color: var(--bone-50);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease);
}
.btn:hover { background: var(--ink-700); }
.btn:active { transform: translateY(1px); }
.btn--ghost {
  background: transparent;
  color: var(--ink-900);
}
.btn--ghost:hover { background: var(--ink-900); color: var(--bone-50); }
.btn--brass {
  background: var(--brass-600);
  border-color: var(--brass-600);
  color: var(--bone-50);
}
.btn--brass:hover { background: var(--brass-700); border-color: var(--brass-700); }

/* ----- TAG / CHIP ----- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid currentColor;
  color: var(--fg-muted);
  background: transparent;
}
.chip--realestate  { color: var(--sector-realestate); }
.chip--hospitality { color: var(--sector-hospitality); }
.chip--fitness     { color: var(--sector-fitness); }
.chip--capital     { color: var(--sector-capital); }

/* ----- RULE / DIVIDER ----- */
hr, .rule {
  border: 0;
  border-top: var(--rule);
  margin: var(--space-7) 0;
}

/* ----- FOCUS ----- */
:focus-visible {
  outline: 1px solid var(--brass-500);
  outline-offset: 2px;
}

/* ----- INVERSE SURFACE ----- */
.surface-ink {
  background: var(--bg-inverse);
  color: var(--fg-inverse);
}
.surface-ink .eyebrow,
.surface-ink p { color: rgba(245,241,234,0.72); }
.surface-ink hr { border-top: var(--rule-inverse); }

/* ----- INDEX MARK ----- */
.index-mark {
  font-family: var(--font-sans);
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-track);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg-meta);
}
.index-mark::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-right: 10px;
  transform: translateY(-2px);
}