/* ============================================================
   RLIM Design System — Colors & Type
   The Millennial Guide to Intelligent Investing
   ============================================================ */

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

:root {
  /* ---------- Brand ---------- */
  --brand-green:        #1B7A4B;   /* RLIM logo green, taken from the logo block */
  --brand-green-deep:   #14593A;   /* button press / heavy emphasis */
  --brand-green-soft:   #E6F2EC;   /* tinted surfaces, badges */
  --brand-green-line:   #C5DFD0;   /* hairlines on green surfaces */
  --brand-ink:          #0F1A14;   /* near-black with a green undertone */

  /* ---------- Neutrals (warm) ---------- */
  --bg:                 #F7F5F1;   /* paper — page background */
  --bg-elevated:        #FFFFFF;   /* cards, modals */
  --bg-sunken:          #EFEBE3;   /* wells, code blocks, inset rows */
  --line:               #E4DED2;   /* hairlines */
  --line-strong:        #C9C1B0;   /* dividers between major sections */

  --fg-1:               #0F1A14;   /* primary text */
  --fg-2:               #3D453F;   /* secondary text */
  --fg-3:               #6B7269;   /* tertiary / labels */
  --fg-4:               #9DA29A;   /* placeholder, disabled */
  --fg-on-brand:        #FFFFFF;   /* text on brand-green */

  /* ---------- Semantic (financial UI) ---------- */
  --pos:                #1B7A4B;   /* gains — matches brand green on purpose */
  --pos-soft:           #E6F2EC;
  --neg:                #B9342A;   /* losses — warm earthy red, not stoplight */
  --neg-soft:           #FBEAE8;
  --warn:               #B8801C;   /* amber: stale data, FX warnings */
  --warn-soft:          #F8ECD2;
  --info:               #2E5D8A;   /* a quiet ink-blue for links / informational */
  --info-soft:          #E6EEF6;

  /* ---------- Radii ---------- */
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-pill: 999px;

  /* ---------- Spacing scale (4pt) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* ---------- Shadow / elevation ---------- */
  --shadow-1: 0 1px 0 rgba(15, 26, 20, 0.04), 0 1px 2px rgba(15, 26, 20, 0.05);
  --shadow-2: 0 1px 0 rgba(15, 26, 20, 0.04), 0 4px 12px -2px rgba(15, 26, 20, 0.08);
  --shadow-3: 0 12px 32px -8px rgba(15, 26, 20, 0.18);
  --inset-1:  inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(15, 26, 20, 0.04);

  /* ---------- Type families ---------- */
  --font-display: "Newsreader", "Source Serif 4", Georgia, serif;
  --font-ui:      "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- Type sizes ---------- */
  --t-display-1: 64px;
  --t-display-2: 48px;
  --t-h1: 36px;
  --t-h2: 28px;
  --t-h3: 22px;
  --t-h4: 18px;
  --t-body: 15px;
  --t-body-sm: 13px;
  --t-caption: 12px;
  --t-mono: 14px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 360ms;
}

/* ============================================================
   Base + semantic element styles
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display-1, .display-2, h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;        /* Newsreader looks best 400–500 at display sizes */
  letter-spacing: -0.015em;
  color: var(--fg-1);
  line-height: 1.08;
  text-wrap: balance;
}

.display-1 { font-size: var(--t-display-1); letter-spacing: -0.025em; }
.display-2 { font-size: var(--t-display-2); letter-spacing: -0.02em; }
h1        { font-size: var(--t-h1); }
h2        { font-size: var(--t-h2); line-height: 1.15; }
h3        { font-size: var(--t-h3); line-height: 1.2; }

h4, .h4 {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--t-h4);
  letter-spacing: -0.01em;
  color: var(--fg-1);
}

p, .body {
  font-family: var(--font-ui);
  font-size: var(--t-body);
  color: var(--fg-2);
  text-wrap: pretty;
}

.body-sm   { font-size: var(--t-body-sm); color: var(--fg-2); }
.caption   { font-size: var(--t-caption); color: var(--fg-3); letter-spacing: 0.01em; }

.eyebrow {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-green);
}

.num, .tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-variant-numeric: tabular-nums;
}

code, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-sunken);
  padding: 1px 6px;
  border-radius: var(--r-xs);
  color: var(--fg-1);
}

a {
  color: var(--info);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--info) 30%, transparent);
  transition: border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
a:hover { border-bottom-color: var(--info); }