/* =====================================================================
   MongoDB Design System — Tokens
   Colors, type, spacing, radius, shadow, motion.
   Loads Euclid Circular A (closest free alt: Hanken Grotesk) +
   Source Code Pro from Google Fonts.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=Source+Code+Pro:wght@400;500&display=swap');

:root {
  /* ---------- BRAND & ACCENT ------------------------------------------------ */
  --color-brand-green:       #00ED64;   /* MongoDB signal green — primary CTA */
  --color-brand-green-dark:  #00684A;   /* Inline links, focus, pressed       */
  --color-brand-green-mid:   #00A35C;   /* Mid-spectrum atmospheric tint      */
  --color-brand-green-soft:  #C3F4D7;   /* Pale mint — featured tier bg       */

  --color-brand-teal-deep:   #001E2B;   /* Hero bands, footer, code mockup    */
  --color-brand-teal:        #023430;   /* Mid-spectrum teal                  */
  --color-brand-teal-mid:    #0A3D3D;   /* Lighter teal hero platform card    */

  /* ---------- CATEGORY ACCENT (course tags only) --------------------------- */
  --color-accent-purple:     #5D3FD3;   /* Database & Security                */
  --color-accent-orange:     #FF6B35;   /* Search                             */
  --color-accent-pink:       #FF4A8C;   /* Course variant                     */
  --color-accent-blue:       #016BF8;   /* Atlas / cloud topics               */

  /* ---------- SURFACE ------------------------------------------------------- */
  --color-canvas:            #FFFFFF;
  --color-canvas-dark:       #001E2B;   /* Code blocks, mockup canvas         */
  --color-surface:           #F9FBFA;
  --color-surface-soft:      #F4F6F4;
  --color-surface-feature:   #E3FCEF;   /* Featured pricing tier mint         */

  --color-hairline:          #E1E7E5;
  --color-hairline-soft:     #EBF0EE;
  --color-hairline-strong:   #C1C7C6;
  --color-hairline-dark:     #3D4F58;

  /* ---------- TEXT ---------------------------------------------------------- */
  --color-ink:               #001E2B;   /* Headlines, body                    */
  --color-charcoal:          #1C2D38;   /* Body emphasis                      */
  --color-slate:             #5C6C75;   /* Secondary                          */
  --color-steel:             #889397;   /* Tertiary, captions                 */
  --color-stone:             #B8C4C2;   /* Muted labels                       */
  --color-muted:             #C1C7C6;   /* Disabled / placeholder             */
  --color-on-dark:           #FFFFFF;
  --color-on-dark-muted:     rgba(255,255,255,0.72);
  --color-on-primary:        #001E2B;   /* Text on brand-green                */

  /* ---------- SEMANTIC ------------------------------------------------------ */
  --color-warning-bg:        #FEF7E1;
  --color-warning-text:      #75550A;
  --color-success-bg:        var(--color-brand-green-soft);
  --color-success-text:      var(--color-brand-green-dark);

  /* =====================================================================
     TYPE
     ===================================================================== */
  --font-display: "Euclid Circular A", "Hanken Grotesk",
                  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body:    var(--font-display);
  --font-mono:    "Source Code Pro", "SF Mono", Menlo, Consolas, monospace;

  /* Hierarchy tokens — size / line-height / weight / tracking */
  --type-hero-display-size:   72px;
  --type-hero-display-lh:     1.10;
  --type-hero-display-w:      500;
  --type-hero-display-tr:     -1.5px;

  --type-display-lg-size:     56px;
  --type-display-lg-lh:       1.15;
  --type-display-lg-w:        500;
  --type-display-lg-tr:       -1px;

  --type-h1-size:             48px;
  --type-h1-lh:               1.20;
  --type-h1-w:                500;
  --type-h1-tr:               -0.5px;

  --type-h2-size:             36px;
  --type-h2-lh:               1.25;
  --type-h2-w:                500;
  --type-h2-tr:               -0.5px;

  --type-h3-size:             28px;
  --type-h3-lh:               1.30;
  --type-h3-w:                500;

  --type-h4-size:             22px;
  --type-h4-lh:               1.35;
  --type-h4-w:                500;

  --type-h5-size:             18px;
  --type-h5-lh:               1.40;
  --type-h5-w:                600;

  --type-subtitle-size:       18px;
  --type-subtitle-lh:         1.50;
  --type-subtitle-w:          400;

  --type-body-md-size:        16px;
  --type-body-md-lh:          1.55;
  --type-body-md-w:           400;

  --type-body-sm-size:        14px;
  --type-body-sm-lh:          1.50;
  --type-body-sm-w:           400;

  --type-body-sm-medium-w:    500;
  --type-caption-bold-size:   13px;
  --type-caption-bold-w:      600;

  --type-micro-size:          11px;
  --type-micro-w:             600;
  --type-micro-tr:            1px;     /* uppercase eyebrow */

  --type-button-size:         14px;
  --type-button-w:            600;
  --type-button-lh:           1.30;

  --type-code-size:           14px;
  --type-code-lh:             1.55;

  /* =====================================================================
     SPACING — 4px base, 8px primary increment
     ===================================================================== */
  --space-xxs:   4px;
  --space-xs:    8px;
  --space-sm:    12px;
  --space-md:    16px;
  --space-lg:    24px;
  --space-xl:    32px;
  --space-xxl:   48px;
  --space-3xl:   64px;
  --space-section:    64px;
  --space-section-lg: 96px;
  --space-hero:       120px;

  /* =====================================================================
     RADIUS
     ===================================================================== */
  --radius-xs:    4px;    /* Course category tags                */
  --radius-sm:    6px;    /* Type badges, code chips             */
  --radius-md:    8px;    /* Inputs, search-pill, code blocks    */
  --radius-lg:    12px;   /* Cards, pricing tiers, course tiles  */
  --radius-xl:    16px;
  --radius-xxl:   24px;
  --radius-full:  9999px;

  /* =====================================================================
     ELEVATION
     ===================================================================== */
  --shadow-0: none;
  --shadow-1: rgba(0, 30, 43, 0.04) 0px 1px 2px 0px;
  --shadow-2: rgba(0, 30, 43, 0.08) 0px 4px 12px 0px;
  --shadow-3: rgba(0, 30, 43, 0.12) 0px 12px 24px -4px;
  --shadow-4: rgba(0, 30, 43, 0.16) 0px 16px 48px -8px;

  /* =====================================================================
     MOTION  (recommended; not explicitly in source — flagged)
     ===================================================================== */
  --motion-fast:    120ms;
  --motion-base:    180ms;
  --motion-slow:    280ms;
  --ease-standard:  cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasis:  cubic-bezier(0.3, 0, 0, 1);
}

/* =======================================================================
   SEMANTIC TYPE CLASSES
   ======================================================================= */
.type-hero-display {
  font-family: var(--font-display);
  font-size: var(--type-hero-display-size);
  line-height: var(--type-hero-display-lh);
  font-weight: var(--type-hero-display-w);
  letter-spacing: var(--type-hero-display-tr);
}
.type-display-lg {
  font-family: var(--font-display);
  font-size: var(--type-display-lg-size);
  line-height: var(--type-display-lg-lh);
  font-weight: var(--type-display-lg-w);
  letter-spacing: var(--type-display-lg-tr);
}
.type-h1 {
  font-family: var(--font-display);
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-lh);
  font-weight: var(--type-h1-w);
  letter-spacing: var(--type-h1-tr);
}
.type-h2 {
  font-family: var(--font-display);
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-lh);
  font-weight: var(--type-h2-w);
  letter-spacing: var(--type-h2-tr);
}
.type-h3 {
  font-family: var(--font-display);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-lh);
  font-weight: var(--type-h3-w);
}
.type-h4 {
  font-family: var(--font-display);
  font-size: var(--type-h4-size);
  line-height: var(--type-h4-lh);
  font-weight: var(--type-h4-w);
}
.type-h5 {
  font-family: var(--font-display);
  font-size: var(--type-h5-size);
  line-height: var(--type-h5-lh);
  font-weight: var(--type-h5-w);
}
.type-subtitle {
  font-family: var(--font-body);
  font-size: var(--type-subtitle-size);
  line-height: var(--type-subtitle-lh);
  font-weight: var(--type-subtitle-w);
}
.type-body-md {
  font-family: var(--font-body);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-lh);
  font-weight: var(--type-body-md-w);
}
.type-body-sm {
  font-family: var(--font-body);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-lh);
  font-weight: var(--type-body-sm-w);
}
.type-body-sm-medium {
  font-family: var(--font-body);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-lh);
  font-weight: var(--type-body-sm-medium-w);
}
.type-caption-bold {
  font-family: var(--font-body);
  font-size: var(--type-caption-bold-size);
  font-weight: var(--type-caption-bold-w);
  line-height: 1.40;
}
.type-micro-upper {
  font-family: var(--font-body);
  font-size: var(--type-micro-size);
  font-weight: var(--type-micro-w);
  letter-spacing: var(--type-micro-tr);
  text-transform: uppercase;
  line-height: 1.40;
}
.type-button {
  font-family: var(--font-body);
  font-size: var(--type-button-size);
  font-weight: var(--type-button-w);
  line-height: var(--type-button-lh);
}
.type-code {
  font-family: var(--font-mono);
  font-size: var(--type-code-size);
  line-height: var(--type-code-lh);
}

/* =======================================================================
   GLOBAL BASE
   ======================================================================= */
html, body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }