/* ============================================================
   ITHACA WEALTH — Brand Foundations (v2.0 rebrand)
   Shared tokens + base type + logo. Used by the guidelines
   document and the sample homepage.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200..600;1,6..72,200..600&family=Hanken+Grotesk:ital,wght@0,300..800;1,400..600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* ---- Core teal (kept as hero, softened + warmed) ---- */
  --cayuga:    #16566A;   /* primary deep teal — Cayuga Lake */
  --gorge:     #0C3946;   /* deepest teal — gorge shadow */
  --shallows:  #5E8896;   /* soft mid teal — lake shallows */

  /* ---- Warm canvas + neutrals (the big shift) ---- */
  --paper:     #F8F2E6;   /* lightest warm paper */
  --limestone: #F0E7D5;   /* warm cream canvas */
  --oat:       #E6DAC2;   /* warm mid neutral — oat */
  --stone:     #C7BCA6;   /* warm taupe */
  --driftwood: #8C8170;   /* deep warm taupe (was cool slate) */

  /* ---- Grounded + accent ---- */
  --sage:      #8A977E;   /* muted olive-sage — organic secondary */
  --clay:      #C16A45;   /* warm terracotta accent (evolved maple) */
  --clay-soft: #D89A78;   /* lighter clay */

  /* ---- Ink ---- */
  --ink:       #25231D;   /* warm charcoal body text */
  --ink-soft:  #5C564B;   /* warm secondary text */

  --rule:      rgba(37, 35, 29, 0.14);
  --rule-soft: rgba(37, 35, 29, 0.08);

  /* ---- Type families ---- */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, monospace;

  /* ---- Spacing rhythm ---- */
  --pad: clamp(28px, 6vw, 80px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============== TYPE PRIMITIVES ============== */
.serif   { font-family: var(--serif); font-weight: 380; }
.serif-i { font-family: var(--serif); font-style: italic; font-weight: 380; }
.sans    { font-family: var(--sans); }
.mono    { font-family: var(--mono); }

/* Eyebrow — warmed: sans small-caps tracking instead of techy mono */
.eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clay);
}
.eyebrow.muted { color: var(--driftwood); }

/* Data / numeric — mono kept ONLY for true data, small doses */
.data {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; }

/* ============== LOGO — Ithaca Wealth (wordmark-led) ==============
   PRIMARY = the wordmark. The uppercase "IW" monogram is a UTILITY
   mark for squares & tiny spaces only (favicon, avatar, app icon) —
   it never plays lead beside the wordmark. */

/* --- primary lockup: the wordmark, on its own --- */
.iw-lockup {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--cayuga);
}
.iw-word {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.5em;
  line-height: 1;
  letter-spacing: -0.02em;
  color: inherit;
  white-space: nowrap;
}
.iw-word em { font-style: italic; font-weight: 360; }
/* the signature clay dot — part of the wordmark, added automatically */
.iw-word::after {
  content: "";
  display: inline-block;
  width: 0.12em;
  height: 0.12em;
  border-radius: 999px;
  background: var(--clay);
  vertical-align: 0.04em;
  margin-left: 0.05em;
}
/* legacy manual stop, if any markup still uses it */
.iw-word .stop { color: var(--clay); }

/* the monogram is HIDDEN in the everyday lockup — wordmark leads */
.iw-lockup .iw-mark { display: none; }
/* opt the mark back in only when explicitly wanted (rare) */
.iw-lockup.with-mark .iw-mark { display: inline-flex; }

.iw-lockup.knockout { color: var(--paper); }
.iw-lockup.mono { color: var(--ink); }

/* --- utility monogram: uppercase IW, for squares / tiny only --- */
.iw-mark, .iw-monogram {
  width: 1.85em;
  height: 1.85em;
  border-radius: 999px;
  background: var(--cayuga);
  color: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-weight: 440;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  flex: none;
  line-height: 1;
}
.iw-mark span, .iw-monogram span { font-size: 0.82em; transform: translateY(0.01em); display: inline-block; }
.iw-monogram.square { border-radius: 24%; }
.iw-lockup.knockout .iw-mark,
.iw-monogram.knockout { background: var(--paper); color: var(--cayuga); }
.iw-lockup.clay .iw-mark,
.iw-monogram.clay { background: var(--clay); }
.iw-lockup.mono .iw-mark { background: var(--ink); color: var(--paper); }

/* stacked seal — formal / print (carries place + founding year) */
.iw-seal { display: inline-flex; flex-direction: column; align-items: center; gap: 0.5em; color: var(--cayuga); text-decoration: none; }
.iw-seal .rule { width: 6.6em; height: 1px; background: currentColor; opacity: 0.38; }
.iw-seal .seal-mark { width: 2.4em; height: 2.4em; border-radius: 999px; background: var(--cayuga); color: var(--paper); display: inline-flex; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 440; font-size: 1.15em; letter-spacing: -0.03em; text-transform: uppercase; line-height: 1; }
.iw-seal .seal-mark span { font-size: 0.82em; display: inline-block; }
.iw-seal .seal-word { font-family: var(--serif); font-weight: 400; font-size: 1.5em; line-height: 1; letter-spacing: -0.015em; color: inherit; white-space: nowrap; }
.iw-seal .seal-word em { font-style: italic; font-weight: 360; }
.iw-seal .seal-sub { font-family: var(--sans); font-weight: 600; font-size: 0.6em; letter-spacing: 0.2em; text-transform: uppercase; color: var(--driftwood); }
.iw-seal.knockout { color: var(--paper); }
.iw-seal.knockout .seal-mark { background: var(--paper); color: var(--cayuga); }
.iw-seal.knockout .seal-sub { color: rgba(248,242,230,0.6); }

/* ============== BUTTON / PILL ============== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.005em;
  background: var(--cayuga);
  color: var(--paper);
  text-decoration: none;
  border: 1px solid var(--cayuga);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
  line-height: 1;
}
.btn:hover { background: var(--gorge); border-color: var(--gorge); }
.btn.ghost {
  background: transparent;
  color: var(--cayuga);
  border-color: var(--rule);
}
.btn.ghost:hover { border-color: var(--cayuga); background: transparent; }
.btn.clay { background: var(--clay); border-color: var(--clay); }
.btn.clay:hover { background: #A85733; border-color: #A85733; }
.btn.small { padding: 9px 16px; font-size: 13px; }

/* ============== TAG / CHIP ============== */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  background: var(--limestone);
  color: var(--cayuga);
  border: 1px solid var(--rule);
}

/* Material Symbols base (icon usage) */
.material-symbols-rounded, .msr {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'wght' 350, 'opsz' 24, 'GRAD' 0, 'FILL' 0;
}