/* =============================================================
   mindlane Design System — Core tokens
   Colors + Type. Import this once at the top of any artifact.
   ============================================================= */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Nunito";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Nunito-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Nunito";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Nunito-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Nunito";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Nunito-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Nunito";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Nunito-SemiBold.ttf") format("truetype");
}
/* Bold / 700 not provided in source kit — Nunito-SemiBold (600) is the
   heaviest weight currently shipped. Falls back to system bold if 700
   is requested. ASK USER FOR Nunito-Bold.ttf if you need heavier display. */

:root {
  /* ---------- Color: brand ---------- */
  /* Dark teal, used for wordmark, body type, primary CTAs */
  --ml-ink:            #012A30;   /* rgb(1,42,48)   wordmark + body text */
  --ml-ink-2:          #0E3B41;   /* slightly lifted ink for hover/press */

  /* Teal accents from the "m" mark + gradient arches */
  --ml-teal:           #22837E;   /* primary teal — links, accents */
  --ml-teal-light:     #2FA79E;   /* lighter accent (top of mark) */
  --ml-teal-50:        #E6F3F1;   /* tint, used for chip backgrounds */
  --ml-teal-100:       #C6E5E1;
  --ml-teal-200:       #9ED2CC;
  --ml-teal-700:       #1B6864;
  --ml-teal-900:       #0E3F3D;   /* darker shade for hover on teal */

  /* Gradient: the "arch" gradient, light teal → dark teal */
  --ml-arch-grad: linear-gradient(180deg, #0E3F3D 0%, #1B6864 55%, #2FA79E 100%);
  --ml-arch-grad-soft: linear-gradient(180deg, #154944 0%, #2A8A85 100%);

  /* ---------- Color: neutrals ---------- */
  --ml-bg:             #FFFFFF;   /* page background */
  --ml-bg-soft:        #F7F9F9;   /* card / section alt background */
  --ml-bg-tint:        #EEF4F3;   /* chip / hovered surface */
  --ml-line:           #E3E8E8;   /* dividers, borders */
  --ml-line-strong:    #C9D2D2;   /* form input borders */
  --ml-muted:          #6B7C7E;   /* secondary text */
  --ml-muted-2:        #93A1A2;   /* tertiary text (price suffix etc.) */

  /* ---------- Color: semantic ---------- */
  --ml-success:        #2FA79E;   /* reuses teal-light */
  --ml-warning:        #E0A53D;
  --ml-danger:         #C0463F;
  --ml-info:           #2F6FA7;

  /* Soft fill (chip backgrounds with semantic tint) */
  --ml-success-soft:   #E6F3F1;
  --ml-warning-soft:   #FBF1DC;
  --ml-danger-soft:    #F8E3E1;
  --ml-info-soft:      #E1ECF7;
  --ml-lavender-soft:  #F1E9FB;   /* used for the "Online-Belehrung" pill */

  /* Course-card modality accents — product-specific, NOT brand colors.
     Used only inside the citizen-app catalog cards (E-Learning / Webinar /
     Präsenz / Punkte pills) to mirror the live product. */
  --ml-modality-elearning:      #A435F0;
  --ml-modality-elearning-soft: #F1E9FB;
  --ml-modality-webinar:        #2F6FA7;
  --ml-modality-webinar-soft:   #E1ECF7;
  --ml-modality-praesenz:       #C0463F;
  --ml-modality-praesenz-soft:  #F8E3E1;
  --ml-modality-points:         #2FA79E;
  --ml-modality-points-soft:    #E6F3F1;

  /* Illustration accent (from undraw illos) */
  --ml-illus-coral:    #F1B6B0;
  --ml-illus-skin:     #FFB9B9;

  /* ---------- Foreground/Background semantic ---------- */
  --fg-1:              var(--ml-ink);
  --fg-2:              var(--ml-muted);
  --fg-3:              var(--ml-muted-2);
  --fg-on-dark:        #FFFFFF;
  --fg-on-teal:        #FFFFFF;

  --bg-1:              var(--ml-bg);
  --bg-2:              var(--ml-bg-soft);
  --bg-3:              var(--ml-bg-tint);
  --bg-dark:           var(--ml-ink);

  --link:              var(--ml-teal);
  --link-hover:        var(--ml-teal-700);

  /* ---------- Type stack ---------- */
  --font-sans: "Nunito", "Inter", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);  /* same family, different weight */
  --font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;

  /* Weights actually shipped */
  --w-light:    300;
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;

  /* ---------- Type scale ---------- */
  /* The product/flyer skews readable; not super-large display.
     Body around 16–17px, headings up to 56px on hero. */
  --fs-display:  56px;   --lh-display:  1.08;  --ls-display:  -0.02em;
  --fs-h1:       40px;   --lh-h1:       1.15;  --ls-h1:       -0.015em;
  --fs-h2:       28px;   --lh-h2:       1.2;   --ls-h2:       -0.01em;
  --fs-h3:       22px;   --lh-h3:       1.3;
  --fs-h4:       18px;   --lh-h4:       1.4;
  --fs-body:     16px;   --lh-body:     1.55;
  --fs-body-lg:  18px;   --lh-body-lg:  1.55;
  --fs-small:    14px;   --lh-small:    1.45;
  --fs-micro:    12px;   --lh-micro:    1.4;

  /* ---------- Radii — round shapes are core to the brand ---------- */
  --r-xs:     4px;
  --r-sm:     8px;
  --r-md:     12px;   /* default for buttons / inputs */
  --r-lg:     16px;   /* cards */
  --r-xl:     24px;
  --r-2xl:    32px;
  --r-pill:   999px;  /* chips, language flags */
  --r-arch:   9999px 9999px var(--r-md) var(--r-md); /* the "arch" — flat bottom, full round top */

  /* ---------- Spacing ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  56px;
  --s-10: 72px;
  --s-11: 96px;

  /* ---------- Elevation ---------- */
  --shadow-sm: 0 1px 2px rgba(1, 42, 48, 0.06);
  --shadow-md: 0 4px 12px rgba(1, 42, 48, 0.08), 0 1px 3px rgba(1, 42, 48, 0.05);
  --shadow-lg: 0 12px 32px rgba(1, 42, 48, 0.10), 0 2px 6px rgba(1, 42, 48, 0.06);
  --shadow-card: 0 2px 8px rgba(1, 42, 48, 0.06), 0 0 0 1px rgba(1, 42, 48, 0.04);
  --shadow-focus: 0 0 0 3px rgba(47, 167, 158, 0.30); /* teal-light at 30% */

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
}

/* ---------- Base / reset ---------- */
html, body {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---------- Semantic type classes ---------- */
.ml-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: var(--w-semibold);
  color: var(--fg-1);
}
.ml-h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  font-weight: var(--w-semibold);
  color: var(--fg-1);
}
.ml-h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  font-weight: var(--w-semibold);
  color: var(--fg-1);
}
.ml-h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--w-semibold);
  color: var(--fg-1);
}
.ml-h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: var(--w-semibold);
  color: var(--fg-1);
}
.ml-body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--w-regular);
  color: var(--fg-1);
}
.ml-body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  font-weight: var(--w-regular);
  color: var(--fg-1);
}
.ml-muted {
  color: var(--fg-2);
}
.ml-small {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--fg-2);
}
.ml-micro {
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  letter-spacing: 0.02em;
  color: var(--fg-2);
}
.ml-eyebrow {
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  font-weight: var(--w-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ml-teal);
}
.ml-quote {
  font-size: var(--fs-h3);
  line-height: 1.4;
  font-weight: var(--w-medium);
  color: var(--fg-on-dark);
}

/* ---------- Default H mappings (auto-applied if you import this) ---------- */
h1 { font: var(--w-semibold) var(--fs-h1)/var(--lh-h1) var(--font-sans); letter-spacing: var(--ls-h1); color: var(--fg-1); margin: 0; }
h2 { font: var(--w-semibold) var(--fs-h2)/var(--lh-h2) var(--font-sans); letter-spacing: var(--ls-h2); color: var(--fg-1); margin: 0; }
h3 { font: var(--w-semibold) var(--fs-h3)/var(--lh-h3) var(--font-sans); color: var(--fg-1); margin: 0; }
h4 { font: var(--w-semibold) var(--fs-h4)/var(--lh-h4) var(--font-sans); color: var(--fg-1); margin: 0; }
p  { font: var(--w-regular) var(--fs-body)/var(--lh-body) var(--font-sans); color: var(--fg-1); margin: 0; }
a  { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Utility classes ---------- */
.ml-arch {
  border-top-left-radius: 9999px;
  border-top-right-radius: 9999px;
}
.ml-bg-arch-gradient {
  background: var(--ml-arch-grad);
}