/* ============================================================
   SCG Growth Partners — Colors & Type
   ============================================================
   Imports for fonts: Inter (UI/body sans) + EB Garamond (display serif, matches logo)
   Loaded via Google Fonts CDN. See README for download/self-host notes.
   ============================================================ */

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

:root {
  /* ---------- COLOR — CORE NEUTRALS ---------- */
  /* Warm off-white paper tone (sampled from the logo background) */
  --paper:        #F4F1EC;   /* warmest, hero / section bg */
  --paper-2:      #ECE8E0;   /* slightly deeper paper for contrast blocks */
  --bone:         #FAF8F4;   /* lightest — surface / card */
  --ink:          #0E0E10;   /* near-black — wordmark, h1 */
  --ink-2:        #1C1C20;   /* body strong */
  --slate-900:    #2A2B30;
  --slate-700:    #4A4B52;
  --slate-500:    #767782;   /* muted body */
  --slate-300:    #B7B6AF;   /* hairline / disabled */
  --slate-200:    #D9D6CE;   /* borders on paper */
  --slate-100:    #E7E3DA;   /* subtle dividers */
  --white:        #FFFFFF;

  /* ---------- COLOR — ACCENT ---------- */
  /* Single restrained accent. Editorial navy — used sparingly: links, primary CTA, charts. */
  --accent:       #1F3A6B;   /* editorial navy */
  --accent-hover: #172D55;
  --accent-press: #0F2040;
  --accent-soft:  #E8EDF6;   /* tint backgrounds */

  /* Secondary accent — restrained green for "growth" semantics only */
  --growth:       #1F7A4D;
  --growth-soft:  #E4F1EA;

  /* ---------- COLOR — SEMANTIC ---------- */
  --success:      #1F7A4D;
  --warning:      #B5731A;
  --danger:       #B83A2C;
  --info:         var(--accent);

  /* ---------- FOREGROUND TOKENS ---------- */
  --fg-1:         var(--ink);          /* primary text, headlines */
  --fg-2:         var(--slate-900);    /* body */
  --fg-3:         var(--slate-700);    /* secondary text */
  --fg-4:         var(--slate-500);    /* tertiary / meta */
  --fg-on-accent: var(--white);
  --fg-on-dark:   var(--paper);

  /* ---------- BACKGROUND TOKENS ---------- */
  --bg-1:         var(--paper);        /* page */
  --bg-2:         var(--bone);         /* card on page */
  --bg-3:         var(--paper-2);      /* contrast block */
  --bg-inverse:   var(--ink);          /* dark sections / footer */
  --bg-accent:    var(--accent);

  /* ---------- BORDERS ---------- */
  --border-1:     var(--slate-200);
  --border-2:     var(--slate-100);
  --border-strong:var(--slate-700);
  --hairline:     0.5px solid var(--slate-200);

  /* ---------- TYPOGRAPHY — FAMILIES ---------- */
  --font-serif:   'EB Garamond', 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- TYPOGRAPHY — SCALE ---------- */
  /* Mostly modular; display sizes use the serif (logo-matched) */
  --fs-display-xl: 88px;   --lh-display-xl: 0.96;  --tr-display-xl: -0.025em;
  --fs-display-l:  64px;   --lh-display-l:  1.02;  --tr-display-l:  -0.022em;
  --fs-display-m:  48px;   --lh-display-m:  1.05;  --tr-display-m:  -0.02em;
  --fs-display-s:  36px;   --lh-display-s:  1.10;  --tr-display-s:  -0.018em;

  --fs-h1:         44px;   --lh-h1:         1.10;  --tr-h1:         -0.02em;
  --fs-h2:         32px;   --lh-h2:         1.15;  --tr-h2:         -0.015em;
  --fs-h3:         24px;   --lh-h3:         1.25;  --tr-h3:         -0.01em;
  --fs-h4:         20px;   --lh-h4:         1.30;  --tr-h4:         -0.005em;

  --fs-body-l:     19px;   --lh-body-l:     1.55;  --tr-body-l:      0;
  --fs-body:       16px;   --lh-body:       1.55;  --tr-body:        0;
  --fs-body-s:     14px;   --lh-body-s:     1.50;  --tr-body-s:      0;

  --fs-caption:    13px;   --lh-caption:    1.40;  --tr-caption:     0.005em;
  --fs-overline:   12px;   --lh-overline:   1.20;  --tr-overline:    0.12em;
  --fs-mono:       14px;   --lh-mono:       1.50;

  /* ---------- WEIGHTS ---------- */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* ---------- SPACING (4px base) ---------- */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;
  --sp-11: 192px;

  /* ---------- RADII ---------- */
  /* SCG aesthetic is editorial — restrained radii, never pillowy */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;
  --r-4: 10px;
  --r-pill: 999px;

  /* ---------- SHADOWS ---------- */
  /* Soft, paper-like. No heavy material drops. */
  --shadow-1: 0 1px 0 rgba(14,14,16,0.04), 0 1px 2px rgba(14,14,16,0.04);
  --shadow-2: 0 1px 2px rgba(14,14,16,0.04), 0 4px 12px rgba(14,14,16,0.05);
  --shadow-3: 0 2px 4px rgba(14,14,16,0.04), 0 12px 32px rgba(14,14,16,0.07);
  --shadow-inset: inset 0 0 0 1px rgba(14,14,16,0.06);

  /* ---------- LAYOUT ---------- */
  --content-max: 1200px;
  --content-narrow: 760px;
  --gutter: 24px;

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.5, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   Use the classes (.h1, .body, etc) or the element selectors below.
   ============================================================ */

html { font-family: var(--font-sans); color: var(--fg-2); background: var(--bg-1); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Display — serif, used for hero headlines and section openers */
.display-xl, .display-l, .display-m, .display-s {
  font-family: var(--font-serif);
  font-weight: var(--fw-medium);
  color: var(--fg-1);
  font-feature-settings: "ss01", "liga", "kern";
}
.display-xl { font-size: var(--fs-display-xl); line-height: var(--lh-display-xl); letter-spacing: var(--tr-display-xl); }
.display-l  { font-size: var(--fs-display-l);  line-height: var(--lh-display-l);  letter-spacing: var(--tr-display-l); }
.display-m  { font-size: var(--fs-display-m);  line-height: var(--lh-display-m);  letter-spacing: var(--tr-display-m); }
.display-s  { font-size: var(--fs-display-s);  line-height: var(--lh-display-s);  letter-spacing: var(--tr-display-s); }

/* Headings — sans by default (UI). Use .display-* for editorial moments. */
h1, .h1 { font-family: var(--font-sans); font-weight: var(--fw-semibold); color: var(--fg-1);
  font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); margin: 0; }
h2, .h2 { font-family: var(--font-sans); font-weight: var(--fw-semibold); color: var(--fg-1);
  font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); margin: 0; }
h3, .h3 { font-family: var(--font-sans); font-weight: var(--fw-semibold); color: var(--fg-1);
  font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); margin: 0; }
h4, .h4 { font-family: var(--font-sans); font-weight: var(--fw-semibold); color: var(--fg-1);
  font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--tr-h4); margin: 0; }

/* Body */
.body-l { font-size: var(--fs-body-l); line-height: var(--lh-body-l); color: var(--fg-2); }
p, .body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); margin: 0; }
.body-s { font-size: var(--fs-body-s); line-height: var(--lh-body-s); color: var(--fg-3); }

.caption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--fg-4); }
.overline { font-size: var(--fs-overline); line-height: var(--lh-overline); letter-spacing: var(--tr-overline);
  text-transform: uppercase; font-weight: var(--fw-semibold); color: var(--fg-3); }

code, .mono { font-family: var(--font-mono); font-size: var(--fs-mono); line-height: var(--lh-mono); }

a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--dur-fast) var(--ease-out); }
a:hover { border-bottom-color: var(--accent); }

/* Selection */
::selection { background: var(--accent); color: var(--white); }