/* ==========================================================================
   Malachyte Design System — Colors & Type
   Single source of truth for color + typography tokens.
   ========================================================================== */

/* -- Fonts ---------------------------------------------------------------- */
/* BDO Grotesk is the official brand typeface. If BDO Grotesk files are not
   available, we fall back to Manrope — nearest Google Fonts match
   (humanist grotesque, similar x-height, similar widths at Medium/Regular/Light).
   FLAG: request actual BDO Grotesk webfonts from design team. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&display=swap');

:root {
  /* === Core brand palette (from Color specifications.pdf) ================ */
  --c-charcoal:        #06171F;  /* text / dark surfaces */
  --c-malachyte-dark:  #2D5843;  /* deep green — legible body-on-light in rare cases */
  --c-malachyte:       #038362;  /* PRIMARY green — logo, CTAs, highlights */
  --c-malachyte-light: #89C0A5;  /* muted green surface */
  --c-lime:            #DAFED0;  /* pale lime surface / tint */
  --c-lime-hivis:      #ADEF9B;  /* HI-VIS LIME — logo on light bg only */
  --c-off-white:       #FAFDF9;  /* canvas / page bg */
  --c-lavender:        #A7A0EB;  /* secondary accent */
  --c-sunset:          #D89251;  /* warm accent */

  /* === Gradients (always tilted / directional — see visual foundations) == */
  --g-malachyte:       linear-gradient(135deg, #DAFED0 0%, #89C0A5 45%, #038362 100%);
  --g-lavender:        linear-gradient(135deg, #DAFED0 0%, #C7BCE8 55%, #A7A0EB 100%);
  --g-lavender-dark:   linear-gradient(180deg, #06171F 0%, #4B4E87 60%, #A7A0EB 100%);
  --g-sunset:          linear-gradient(180deg, #DAFED0 0%, #E8C89A 55%, #D89251 100%);

  /* === Semantic surface & text =========================================== */
  --bg-page:           var(--c-off-white);
  --bg-surface:        #FFFFFF;
  --bg-sunken:         #F4F2EC;     /* warm paper, seen in sidebar */
  --bg-inverse:        var(--c-charcoal);
  --bg-accent-soft:    rgba(3, 131, 98, 0.08);

  --fg-default:        var(--c-charcoal);
  --fg-muted:          #606B70;     /* secondary copy, icon color in sidebar */
  --fg-subtle:         #8A9399;     /* captions, meta */
  --fg-inverse:        var(--c-off-white);
  --fg-accent:         var(--c-malachyte);
  --fg-on-accent:      #FFFFFF;

  --border-default:    #E6E2DB;     /* warm neutral border */
  --border-strong:     #D4CFC5;
  --border-accent:     var(--c-malachyte);

  /* === Status ============================================================ */
  --st-success:        #038362;     /* reuses brand green */
  --st-warning:        #D89251;     /* reuses sunset */
  --st-danger:         #C14545;
  --st-info:           #4B4E87;

  /* === Type scale (fluid but deterministic) ============================== */
  --font-sans:         'BDO Grotesk', 'Manrope', -apple-system, BlinkMacSystemFont,
                       'Segoe UI', Roboto, sans-serif;
  --font-mono:         ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fs-display-xl:     64px;        /* chapter titles — "Typography & colors" */
  --fs-display:        48px;        /* slide H1 */
  --fs-h1:             36px;
  --fs-h2:             28px;
  --fs-h3:             20px;
  --fs-h4:             16px;
  --fs-body:           14px;        /* portal default */
  --fs-body-lg:        16px;        /* marketing body */
  --fs-caption:        12px;
  --fs-micro:          11px;        /* ALL-CAPS sidebar labels */

  --lh-tight:          1.1;
  --lh-snug:           1.25;
  --lh-normal:         1.45;
  --lh-relaxed:        1.6;

  --tracking-tight:    -0.02em;     /* display */
  --tracking-snug:     -0.005em;    /* headings */
  --tracking-normal:   0;
  --tracking-label:    0.08em;      /* UPPERCASE micro labels */

  --fw-light:          300;
  --fw-regular:        400;
  --fw-medium:         500;
  --fw-semibold:       600;

  /* === Radii ============================================================= */
  --r-xs:   4px;     /* chips, micro buttons */
  --r-sm:   6px;     /* inputs */
  --r-md:   8px;     /* buttons, rows */
  --r-lg:   12px;    /* cards */
  --r-xl:   20px;    /* big surface cards, banners */
  --r-2xl:  32px;    /* shape/hero blobs */
  --r-pill: 9999px;

  /* === Spacing (8pt base with 4pt micro) ================================= */
  --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;
  --s-20: 80px;
  --s-24: 96px;

  /* === Shadows =========================================================== */
  /* The brand is largely flat; shadows are reserved for floating surfaces. */
  --shadow-xs:  0 1px 2px rgba(6, 23, 31, 0.04);
  --shadow-sm:  0 1px 2px rgba(6, 23, 31, 0.06), 0 1px 3px rgba(6, 23, 31, 0.04);
  --shadow-md:  0 4px 12px rgba(6, 23, 31, 0.06), 0 2px 4px rgba(6, 23, 31, 0.04);
  --shadow-lg:  0 12px 32px rgba(6, 23, 31, 0.10), 0 4px 8px rgba(6, 23, 31, 0.04);
  --shadow-glow: 0 0 0 6px rgba(3, 131, 98, 0.12);

  /* === Motion ============================================================ */
  --ease-out:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:      120ms;
  --dur-normal:    220ms;
  --dur-slow:      420ms;
}

/* --------------------------------------------------------------------------
   Semantic element styles — consume the tokens above.
   -------------------------------------------------------------------------- */

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

h1, .h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-default);
  margin: 0;
}

h2, .h2 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  margin: 0;
}

h3, .h3 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  margin: 0;
}

h4, .h4 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  margin: 0;
}

p, .body {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-default);
  margin: 0;
  text-wrap: pretty;
}

.body-lg { font-size: var(--fs-body-lg); }

.caption, small {
  font-size: var(--fs-caption);
  color: var(--fg-muted);
  line-height: var(--lh-normal);
}

.label-micro {
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-default);
}

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 13px;
}

/* Utility: the signature tilted-oval shape */
.mal-oval {
  border-radius: 50%;
  transform: rotate(-8deg);
  display: inline-block;
}