/* =============================================================
   CleanGrid Solar — Colors & Type
   Modern, clean, neutral with brand-color accents.
   ============================================================= */

/* Webfont — Manrope (Google Fonts) is the chosen substitute for
   the logo's bold humanist sans. See README "Type" for notes. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Brand colors (muted application palette) ----------
     Note: the wordmark still uses the original vivid blue/green from
     the logo artwork. These are the more neutral, application-level
     versions used across UI surfaces. */
  --cg-blue:        #2D5E8E;   /* muted solar-panel navy */
  --cg-blue-700:    #234B73;
  --cg-blue-500:    #4A7AAA;
  --cg-blue-100:    #D7E2EE;
  --cg-blue-50:     #EDF2F7;

  --cg-green:       #6B9252;   /* sage / field green */
  --cg-green-700:   #557540;
  --cg-green-500:   #88AC72;
  --cg-green-100:   #DCE7D2;
  --cg-green-50:    #EEF3E8;

  --cg-sun:         #D88B3F;   /* warm amber */
  --cg-sun-700:     #B16E26;
  --cg-sun-500:     #E1A064;
  --cg-sun-100:     #F2DBBE;
  --cg-sun-50:      #F8EDDA;

  /* ---------- Neutrals (warm-grey leaning, paper-like) ---------- */
  --ink-900:        #0F1620;   /* near-black, used for headlines */
  --ink-800:        #1B2533;
  --ink-700:        #2C3849;
  --ink-600:        #4A5666;
  --ink-500:        #6B7585;
  --ink-400:        #9099A6;
  --ink-300:        #C3C9D2;
  --ink-200:        #DFE3E9;
  --ink-100:        #ECEFF3;
  --ink-50:         #F4F6F8;

  --canvas:         #FAFAF7;   /* off-white page background */
  --surface:        #FFFFFF;   /* card / panel */
  --surface-warm:   #F7F4ED;   /* warm accent surface */
  --border:         #E6E3DA;   /* hairline on warm surfaces */
  --border-cool:    #E2E6EC;   /* hairline on cool surfaces */

  /* ---------- Semantic ---------- */
  --fg-1:           var(--ink-900);   /* primary text */
  --fg-2:           var(--ink-700);   /* secondary text */
  --fg-3:           var(--ink-500);   /* tertiary, captions */
  --fg-4:           var(--ink-400);   /* placeholder, disabled */
  --fg-inverse:     #FFFFFF;
  --link:           var(--cg-blue);
  --link-hover:     var(--cg-blue-700);

  --bg-1:           var(--canvas);
  --bg-2:           var(--surface);
  --bg-3:           var(--ink-50);
  --bg-inverse:     var(--ink-900);

  --success:        var(--cg-green-700);
  --success-bg:     var(--cg-green-50);
  --warning:        var(--cg-sun-700);
  --warning-bg:     var(--cg-sun-50);
  --danger:         #C2362B;
  --danger-bg:      #FBEAE7;
  --info:           var(--cg-blue);
  --info-bg:        var(--cg-blue-50);

  /* ---------- Type families ---------- */
  --font-display:   "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:      "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:      "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- Type scale (modular, 1.200) ---------- */
  --fs-display:     clamp(48px, 6vw, 88px);
  --fs-h1:          clamp(36px, 4vw, 56px);
  --fs-h2:          clamp(28px, 3vw, 40px);
  --fs-h3:          24px;
  --fs-h4:          20px;
  --fs-body-lg:     18px;
  --fs-body:        16px;
  --fs-body-sm:     14px;
  --fs-caption:     13px;
  --fs-eyebrow:     12px;

  --lh-tight:       1.05;
  --lh-snug:        1.20;
  --lh-normal:      1.50;
  --lh-loose:       1.70;

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

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

  /* ---------- Shadows (subtle, paper-like) ---------- */
  --shadow-xs:  0 1px 2px rgba(15, 22, 32, 0.04);
  --shadow-sm:  0 1px 2px rgba(15, 22, 32, 0.05), 0 1px 3px rgba(15, 22, 32, 0.06);
  --shadow-md:  0 4px 8px -2px rgba(15, 22, 32, 0.06), 0 2px 4px -2px rgba(15, 22, 32, 0.05);
  --shadow-lg:  0 12px 24px -8px rgba(15, 22, 32, 0.10), 0 4px 8px -4px rgba(15, 22, 32, 0.06);
  --shadow-xl:  0 24px 48px -12px rgba(15, 22, 32, 0.16);
  --shadow-glow-sun: 0 8px 32px -8px rgba(216, 139, 63, 0.32);

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

/* =============================================================
   Semantic element styles — applied by class to keep utility,
   but the variables above are the source of truth.
   ============================================================= */

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

.cg-display, h1.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--fg-1);
}
.cg-h1, h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: -0.015em;
  color: var(--fg-1);
}
.cg-h2, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--fg-1);
}
.cg-h3, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--fg-1);
}
.cg-h4, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: 1.35;
  color: var(--fg-1);
}
.cg-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--cg-sun-700);
}
.cg-body-lg, p.lead {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.cg-body, p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.cg-caption, small {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  line-height: 1.45;
  color: var(--fg-3);
}
.cg-mono, code, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* The "SOLAR" lockup style — wide tracking, all caps, sun color */
.cg-lockup-tag {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--cg-sun);
}