/* ==========================================================================
   GROWCEPT — Colors & Type Tokens
   Version: 2026-04
   ========================================================================== */

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

:root {
  /* ----------------------------------------------------------------------
     COLOR — Brand
     The leaf is bright cyan-blue, the wordmark a warm slate.
     ---------------------------------------------------------------------- */
  --brand-cyan: #2FB7FF;          /* primary — the leaf */
  --brand-cyan-deep: #11A1DE;     /* leaf overlap shadow, darker actions */
  --brand-cyan-700: #0B7FB0;      /* pressed states, link-visited */
  --brand-cyan-100: #D6EFFB;      /* tinted backgrounds, badges */
  --brand-cyan-50:  #EAF7FE;      /* whisper backgrounds */

  --brand-slate: #505D5F;         /* the wordmark — primary text on light */
  --brand-slate-deep: #2C3638;    /* headlines, max-contrast text */
  --brand-slate-700: #3D4749;     /* sub-headlines */
  --brand-slate-300: #8A9498;     /* secondary text */
  --brand-slate-200: #B7BEC0;     /* tertiary, captions */
  --brand-slate-100: #DDE1E2;     /* dividers, hairlines */
  --brand-slate-50:  #F1F3F3;     /* subtle surfaces */

  /* ----------------------------------------------------------------------
     COLOR — Surfaces (light theme)
     ---------------------------------------------------------------------- */
  --surface-canvas:   #FFFFFF;    /* page background */
  --surface-raised:   #FFFFFF;    /* cards on canvas */
  --surface-sunken:   #F7F9FA;    /* sections, alt rows */
  --surface-tinted:   #EAF7FE;    /* brand-tinted sections */
  --surface-deep:     #0E1A1F;    /* dark inversion blocks */
  --surface-deep-2:   #15252B;    /* dark-on-dark cards */

  /* ----------------------------------------------------------------------
     COLOR — Foreground roles
     ---------------------------------------------------------------------- */
  --fg-1: var(--brand-slate-deep);    /* primary text */
  --fg-2: var(--brand-slate);         /* body */
  --fg-3: var(--brand-slate-300);     /* secondary */
  --fg-4: var(--brand-slate-200);     /* tertiary, disabled */
  --fg-on-brand: #FFFFFF;             /* text on cyan */
  --fg-on-dark:  #F1F3F3;             /* text on slate-deep */

  /* ----------------------------------------------------------------------
     COLOR — Semantic
     ---------------------------------------------------------------------- */
  --success: #2FB37A;
  --success-soft: #E0F4EA;
  --warning: #E8A23B;
  --warning-soft: #FBEFD9;
  --danger:  #E14B4B;
  --danger-soft:  #FBDDDD;
  --info: var(--brand-cyan);
  --info-soft: var(--brand-cyan-100);

  /* ----------------------------------------------------------------------
     COLOR — Accents (used sparingly, for charts and illustration)
     ---------------------------------------------------------------------- */
  --accent-mint:    #7FD8B4;       /* paired with brand cyan */
  --accent-sky:     #8FCFF0;
  --accent-evening: #2A4F73;       /* deep navy for serious moments */
  --accent-cream:   #FAF7F0;       /* warm contrast surface */

  /* ----------------------------------------------------------------------
     TYPE — Families
     Nunito is the closest free match to the rounded geometric wordmark.
     ⚠ Substitution flag: original wordmark may be Gotham Rounded / Avenir
     Next. Update --font-display if true brand font is licensed.
     ---------------------------------------------------------------------- */
  --font-display: 'Nunito', 'Avenir Next', 'Gotham Rounded', system-ui, sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ----------------------------------------------------------------------
     TYPE — Weights
     ---------------------------------------------------------------------- */
  --w-light:    300;
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;
  --w-black:    800;

  /* ----------------------------------------------------------------------
     TYPE — Modular scale (1.250 — major third)
     Base 16px; scale skews larger at headline sizes for impact.
     ---------------------------------------------------------------------- */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-52: 3.25rem;
  --fs-64: 4rem;
  --fs-80: 5rem;

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-loose:   1.7;

  --ls-tight:   -0.02em;
  --ls-display: -0.025em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-cap:     0.12em;

  /* ----------------------------------------------------------------------
     SPACING — 4px base
     ---------------------------------------------------------------------- */
  --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;

  /* ----------------------------------------------------------------------
     RADIUS — generous & rounded to match the wordmark's character
     ---------------------------------------------------------------------- */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-pill: 9999px;

  /* ----------------------------------------------------------------------
     SHADOW — soft, ambient. No harsh drops.
     ---------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(16, 33, 41, 0.06);
  --shadow-sm: 0 2px 6px rgba(16, 33, 41, 0.06), 0 1px 2px rgba(16, 33, 41, 0.04);
  --shadow-md: 0 8px 24px rgba(16, 33, 41, 0.08), 0 2px 6px rgba(16, 33, 41, 0.04);
  --shadow-lg: 0 18px 48px rgba(16, 33, 41, 0.12), 0 4px 12px rgba(16, 33, 41, 0.06);
  --shadow-xl: 0 32px 80px rgba(16, 33, 41, 0.16);
  --shadow-brand: 0 12px 32px rgba(47, 183, 255, 0.28);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ----------------------------------------------------------------------
     MOTION
     ---------------------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);   /* preferred */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;

  /* ----------------------------------------------------------------------
     BORDER
     ---------------------------------------------------------------------- */
  --border-hairline: 1px solid var(--brand-slate-100);
  --border-strong:   1px solid var(--brand-slate-200);
  --border-brand:    1px solid var(--brand-cyan);
}

/* ==========================================================================
   SEMANTIC TYPE STYLES
   Use these instead of raw font-size when possible.
   ========================================================================== */
.t-display, h1.display {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: clamp(2.5rem, 6vw, var(--fs-80));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
}

.t-h1, h1 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: clamp(2rem, 4.5vw, var(--fs-64));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
}

.t-h2, h2 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-40);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}

.t-h3, h3 {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}

.t-h4, h4 {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.t-h5, h5 {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.t-lead {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--fs-20);
  line-height: var(--lh-loose);
  color: var(--fg-2);
}

.t-body, p {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--fs-16);
  line-height: var(--lh-loose);
  color: var(--fg-2);
}

.t-body-sm {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.t-caption, small {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.t-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-cap);
  text-transform: uppercase;
  color: var(--brand-cyan-deep);
}

.t-mono, code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--brand-slate-50);
  padding: 0.1em 0.35em;
  border-radius: var(--r-xs);
  color: var(--brand-slate-deep);
}

a {
  color: var(--brand-cyan-deep);
  text-decoration-color: rgba(17, 161, 222, 0.4);
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--brand-cyan-700); }

/* Reset margins on heading + paragraph for predictable layout */
h1, h2, h3, h4, h5, p { margin: 0; }