/* =============================================================
   Successionia — Colors & Type
   Sage-tree brand. Serif wordmark. Warm cream canvas.
   ============================================================= */

@import url("https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Montserrat:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap");

/* PP Neue Montreal — via FontShare (free commercial CDN). Swap to licensed TTF in fonts/ for production. */
@import url("https://api.fontshare.com/v2/css?f[]=satoshi@400,500,600,700&f[]=general-sans@400,500,600,700&display=swap");
/* Fallback "Montreal" — Fontshare doesn't ship PP Neue Montreal. General Sans is the closest geometric-humanist match. Replace `--font-display` src with a licensed PP Neue Montreal if you have one. */

:root {
  /* ---------- Brand core ---------- */
  --brand-sage: #a8c5a3; /* logo foliage, mid */
  --brand-sage-light: #c4d9bf; /* foliage highlight */
  --brand-sage-dark: #7fa679; /* foliage shadow */
  --brand-trunk: #2e3d3c; /* trunk / serif wordmark */
  --brand-cream: #f5f2ea; /* page background, logo bg */
  --brand-cream-deep: #ede8db; /* alt cream section */

  /* ---------- Neutrals (warm) ---------- */
  --bg: #faf8f2; /* app canvas */
  --bg-muted: #f2efe6; /* sidebar cream */
  --surface: #ffffff; /* cards, white surfaces */
  --surface-alt: #fbfaf5; /* subtle alt */
  --border: #e6e1d3; /* hairlines on cream */
  --border-strong: #d5cfbe;
  --border-subtle: #efebdf;

  /* Gray ramp (warm-cool slate) */
  --slate-50: #f6f7f5;
  --slate-100: #eceee9;
  --slate-200: #d9ddd6;
  --slate-300: #bac1b7;
  --slate-400: #8d958a;
  --slate-500: #636b62;
  --slate-600: #474f47;
  --slate-700: #2f3830;
  --slate-800: #1d2520;
  --slate-900: #0e1512;

  /* ---------- Text ---------- */
  --fg-1: #1d2520; /* primary body / headings */
  --fg-2: #474f47; /* secondary */
  --fg-3: #6b7268; /* tertiary / labels */
  --fg-4: #94998f; /* placeholder / hint */
  --fg-on-dark: #f5f2ea;
  --fg-on-brand: #ffffff;

  /* ---------- Accents (derived from logo) ---------- */
  --accent-navy: #2e3d3c; /* primary = trunk */
  --accent-navy-hover: #1e2a29;
  --accent-trunk-deep: #1e2a29;
  --accent-sage-ink: #3e6238; /* text on sage tints — AA on cream */
  --accent-sage-solid: #4f7a48; /* solid sage CTA — AA with white */
  --accent-sage-hover: #3e6238;
  --accent-sage-foliage: #7fa679; /* illustration/chart use only, NOT for white text */

  /* ---------- Semantic ---------- */
  --success: #1d9b5e; /* total value green card */
  --success-soft: #def3e6;
  --success-fg: #0e6b3e;

  --warning: #e0a82e;
  --warning-soft: #fbf0d3;
  --warning-fg: #8b6108;

  --danger: #d64545;
  --danger-soft: #fbe2e2;
  --danger-fg: #962020;

  --info: #4f7a48;
  --info-soft: #e3ecdf;
  --info-fg: #2e4d2a;

  /* Tinted metric-card backgrounds — derived from brand + warm earth */
  --tint-green: #def3e6;
  --tint-green-fg: #1d9b5e;
  --tint-sage: #e3ecdf;
  --tint-sage-fg: #4f7a48;
  --tint-sage-lt: #eef4e8;
  --tint-sage-lt-fg: #6b9066;
  --tint-amber: #fbf0d3;
  --tint-amber-fg: #c68a0e;
  --tint-orange: #fbe4d3;
  --tint-orange-fg: #d46b1f;
  --tint-pink: #fadfe8;
  --tint-pink-fg: #c43d6b;
  --tint-trunk: #e3e6e4;
  --tint-trunk-fg: #2e3d3c;
  --tint-cream: #ede8db;
  --tint-cream-fg: #6b6143;

  /* ---------- Typography ---------- */
  --font-serif:
    "Cormorant", "EB Garamond", "Source Serif Pro", ui-serif, Georgia, serif;
  --font-sans:
    "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display:
    "General Sans", "PP Neue Montreal", "Montserrat", system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;
  --font-mono:
    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale (rem assuming 16px root) */
  --text-xs: 0.75rem; /* 12 */
  --text-sm: 0.8125rem; /* 13 */
  --text-base: 0.8125rem; /* 13 — app body */
  --text-md: 1rem; /* 16 */
  --text-lg: 1.125rem; /* 18 */
  --text-xl: 1.375rem; /* 22 */
  --text-2xl: 1.75rem; /* 28 */
  --text-3xl: 2.25rem; /* 36 */
  --text-4xl: 3rem; /* 48 */
  --text-5xl: 3.75rem; /* 60 */

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.08em;

  /* ---------- Spacing ---------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  /* ---------- Radii ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px; /* default inputs */
  --radius-lg: 10px; /* buttons, chips */
  --radius-xl: 14px; /* cards */
  --radius-2xl: 20px; /* hero blocks / banners */
  --radius-pill: 9999px;

  /* ---------- Shadow system (warm, subtle) ---------- */
  --shadow-xs: 0 1px 1px rgba(46, 61, 60, 0.04);
  --shadow-sm:
    0 1px 2px rgba(46, 61, 60, 0.05), 0 1px 1px rgba(46, 61, 60, 0.03);
  --shadow-md:
    0 2px 4px rgba(46, 61, 60, 0.06), 0 4px 12px rgba(46, 61, 60, 0.05);
  --shadow-lg:
    0 8px 24px rgba(46, 61, 60, 0.08), 0 2px 4px rgba(46, 61, 60, 0.04);
  --shadow-xl:
    0 16px 40px rgba(46, 61, 60, 0.12), 0 4px 8px rgba(46, 61, 60, 0.06);
  --shadow-focus: 0 0 0 3px rgba(127, 166, 121, 0.28);
  --shadow-inset: inset 0 1px 2px rgba(46, 61, 60, 0.06);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;

  /* ---------- Layout ---------- */
  --sidebar-w: 232px;
  --topbar-h: 56px;
  --content-max: 1200px;
}

/* =============================================================
   Semantic typography elements
   ============================================================= */

html,
body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

/* Display / brand */
.display,
h1.display {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  font-variation-settings: "opsz" 96;
}

h1,
.h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  font-variation-settings: "opsz" 48;
}

h2,
.h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  font-variation-settings: "opsz" 40;
}

h3,
.h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}

h4,
.h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}

h5,
.h5 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-md);
  color: var(--fg-1);
}

p,
.body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-1);
}

.body-sm {
  font-size: var(--text-sm);
  color: var(--fg-2);
}
.caption {
  font-size: var(--text-xs);
  color: var(--fg-3);
  letter-spacing: var(--tracking-snug);
}
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-3);
}

code,
kbd,
pre,
.mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a {
  color: var(--accent-navy);
  text-decoration: none;
}
a:hover {
  color: var(--accent-navy-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

::selection {
  background: var(--brand-sage-light);
  color: var(--slate-800);
}