/* =============================================================
   GreenUp — Colors & Type
   Import:  <link rel="stylesheet" href="colors_and_type.css">
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Roboto:wght@400;500;700;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* -------- Brand primary: GreenUp Green -------- */
  --green-50:  #eefaef;
  --green-100: #d3f2d6;
  --green-200: #a7e4ae;
  --green-300: #7cb57f;
  --green-400: #2f8a34;
  --green-500: #0f7a1f;   /* brand primary — deep forest */
  --green-600: #088418;
  --green-700: #066813;
  --green-800: #074d10;
  --green-900: #0a3a11;

  --brand: var(--green-500);
  --brand-hover: var(--green-600);
  --brand-press: var(--green-700);
  --brand-soft: var(--green-50);
  --brand-soft-border: var(--green-100);

  /* -------- Neutrals (warm off-white → deep charcoal) -------- */
  --white:    #ffffff;
  --cream:    #fbfaf6;     /* warm app background */
  --sand:     #f4f2ec;     /* soft surface */
  --stone-50:  #f7f7f5;
  --stone-100: #eeeeea;
  --stone-200: #e1e1db;
  --stone-300: #c9c9c1;
  --stone-400: #9c9c93;
  --stone-500: #70706a;
  --stone-600: #4d4d48;
  --stone-700: #32322f;
  --stone-800: #1f1f1d;
  --stone-900: #121211;

  /* -------- Semantic text / surface -------- */
  --fg1: var(--stone-900);        /* primary text */
  --fg2: var(--stone-600);        /* secondary text */
  --fg3: var(--stone-400);        /* muted / captions */
  --fg-on-brand: #ffffff;
  --fg-inverse: var(--cream);

  --bg1: var(--cream);            /* app background */
  --bg2: var(--white);            /* card */
  --bg3: var(--sand);             /* subtle panel */
  --bg-inverse: var(--stone-900);

  --border: var(--stone-200);
  --border-strong: var(--stone-300);
  --divider: var(--stone-100);

  /* -------- Status colors -------- */
  --success:     #0f7a1f;         /* same as brand — energy = green */
  --success-bg:  #eefaef;
  --warning:     #e89b1a;         /* warm amber */
  --warning-bg:  #fdf3de;
  --danger:      #d94a3a;         /* warm terracotta red */
  --danger-bg:   #fbe9e6;
  --info:        #3977c2;
  --info-bg:     #e9f0fa;

  /* Data-viz accents — solar / wind / battery / grid */
  --solar:   #e8a93a;   /* sun */
  --wind:    #4aa3c7;   /* sky */
  --battery: #7a5bd6;   /* storage */
  --grid:    #6b6b63;   /* neutral */
  --consume: #d94a3a;   /* offtake */
  --produce: var(--green-500);


  /* -------- Type -------- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Roboto", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-black:   800;

  /* Type scale — friendly, generous */
  --fs-display: 72px;    --lh-display: 1.05; --tr-display: -0.02em;
  --fs-h1: 48px;         --lh-h1: 1.1;      --tr-h1: -0.015em;
  --fs-h2: 36px;         --lh-h2: 1.15;     --tr-h2: -0.01em;
  --fs-h3: 28px;         --lh-h3: 1.2;      --tr-h3: -0.005em;
  --fs-h4: 22px;         --lh-h4: 1.3;      --tr-h4: 0;
  --fs-lead: 20px;       --lh-lead: 1.45;
  --fs-body: 16px;       --lh-body: 1.55;
  --fs-small: 14px;      --lh-small: 1.45;
  --fs-micro: 12px;      --lh-micro: 1.4;
  --fs-overline: 12px;   --tr-overline: 0.08em;

  /* -------- Spacing (4pt base) -------- */
  --sp-0: 0;
  --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;

  /* -------- Radii — rounded, friendly -------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* -------- Shadows — soft, low, warm -------- */
  --shadow-xs: 0 1px 2px rgba(18, 18, 17, 0.04);
  --shadow-sm: 0 1px 3px rgba(18, 18, 17, 0.05), 0 1px 2px rgba(18, 18, 17, 0.04);
  --shadow-md: 0 4px 12px rgba(18, 18, 17, 0.06), 0 2px 4px rgba(18, 18, 17, 0.04);
  --shadow-lg: 0 12px 28px rgba(18, 18, 17, 0.08), 0 4px 10px rgba(18, 18, 17, 0.04);
  --shadow-xl: 0 24px 48px rgba(18, 18, 17, 0.10), 0 8px 18px rgba(18, 18, 17, 0.05);
  --shadow-brand: 0 8px 24px rgba(15, 122, 31, 0.24);
  --shadow-brand-lg: 0 16px 40px rgba(15, 122, 31, 0.30);
  --focus-ring: 0 0 0 3px rgba(15, 122, 31, 0.28);

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

/* ============ Base / reset-ish ============ */
html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg1);
  background: var(--bg1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============ Semantic type roles ============ */
.display, h1.display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  color: var(--fg1);
  margin: 0;
}
.h1, h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tr-h1);
  margin: 0;
}
.h2, h2 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tr-h2);
  margin: 0;
}
.h3, h3 {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tr-h3);
  margin: 0;
}
.h4, h4 {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  margin: 0;
}
.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--fg2);
  font-weight: var(--fw-regular);
}
p, .body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg1);
  margin: 0;
}
.small { font-size: var(--fs-small); line-height: var(--lh-small); }
.micro { font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--fg2); }
.overline {
  font-size: var(--fs-overline);
  letter-spacing: var(--tr-overline);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--fg2);
}
code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}