/* ==========================================================================
   WIBK Design System — Colors & Type
   Generated from @wibk/tokens (wibk-tokens repo)
   Academic Atelier palette, shared across Website / Anmeldung / Academy.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ── Brand fonts (self-hosted) ── */
@font-face {
  font-family: 'Manrope';
  src: url('fonts/Manrope-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('fonts/Manrope-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('fonts/Manrope-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('fonts/Manrope-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('fonts/Manrope-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('fonts/Manrope-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('fonts/Manrope-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('fonts/Manrope-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Brand Colors ── */
  --wibk-color-primary:            #05101e;  /* Midnight — authority, headers, primary CTAs */
  --wibk-color-primary-hover:      #0a1b35;
  --wibk-color-on-primary:         #ffffff;

  --wibk-color-secondary:          #2e7d5c;  /* Forest Sage — growth, links, success; harmonized with teal accent */
  --wibk-color-secondary-hover:    #256648;
  --wibk-color-on-secondary:       #ffffff;

  --wibk-color-tertiary:           #210700;  /* Warm Brown — used sparingly for quotes, humanity */
  --wibk-color-tertiary-warm:      #6b2100;
  --wibk-color-on-tertiary:        #ffffff;

  --wibk-color-accent-teal:        #328688;  /* Digital / interactive accent */
  --wibk-color-accent-teal-dark:   #256b6d;

  /* ── Logo Gradient (from A_WIBK_Logo.svg) ── */
  --wibk-gradient-logo:            linear-gradient(135deg, #338789 0%, #a1d369 100%);

  /* ── Surfaces (cool, slightly blue-tinted — NOT pure grey) ── */
  --wibk-surface-base:             #f8f9ff;  /* page background */
  --wibk-surface-raised:           #ffffff;  /* cards, panels */
  --wibk-surface-sunken:           #eff4ff;  /* inset, alt sections */
  --wibk-surface-muted:            #d8e3f8;  /* tags, prominent modules */

  /* ── Ink / Text ── */
  --wibk-ink:                      #111c2b;
  --wibk-ink-muted:                #3d4f6b;
  --wibk-ink-faint:                #8097b5;

  /* ── Semantic ── */
  --wibk-success:                  #15803d;
  --wibk-success-light:            #dcfce7;
  --wibk-error:                    #b91c1c;
  --wibk-error-light:              #fee2e2;
  --wibk-warning:                  #92400e;
  --wibk-warning-light:            #fef9c3;
  --wibk-info:                     #075985;
  --wibk-info-light:               #e0f2fe;

  /* ── Borders (alpha over ink) ── */
  --wibk-border:                   rgba(17, 28, 43, 0.08);
  --wibk-border-soft:              rgba(17, 28, 43, 0.05);
  --wibk-border-hover:             rgba(17, 28, 43, 0.16);

  /* ── Shell context (Academy "glass" layer) ── */
  --wibk-shell-canvas:             #f3f6fb;
  --wibk-shell-canvas-deep:        #dde6f1;
  --wibk-shell-panel:              rgba(255, 255, 255, 0.70);
  --wibk-shell-panel-strong:       rgba(255, 255, 255, 0.82);
  --wibk-shell-stroke:             rgba(255, 255, 255, 0.62);
  --wibk-shell-stroke-strong:      rgba(137, 154, 178, 0.34);
  --wibk-shell-text:               #112033;
  --wibk-shell-text-muted:         #5d6d82;
  --wibk-shell-accent:             #243243;
  --wibk-shell-accent-soft:        rgba(36, 50, 67, 0.08);

  /* ── Student accent (used for "Weiterlernen" gradient buttons) ── */
  --wibk-student-accent:           #536375;
  --wibk-student-accent-dark:      #2d3948;
  --wibk-student-accent-darkest:   var(--wibk-color-primary);

  /* ── Typography: Families ── */
  --wibk-font-display: 'Manrope', system-ui, -apple-system, sans-serif;
  --wibk-font-body:    'Manrope', system-ui, -apple-system, sans-serif;
  --wibk-font-label:   'Inter', system-ui, sans-serif;
  --wibk-font-mono:    'IBM Plex Mono', 'JetBrains Mono', monospace;

  /* ── Typography: Scale (rem, 16px base) ── */
  --wibk-text-xs:   0.6875rem;   /* 11px */
  --wibk-text-sm:   0.8125rem;   /* 13px */
  --wibk-text-base: 1rem;        /* 16px */
  --wibk-text-lg:   1.125rem;    /* 18px */
  --wibk-text-xl:   1.25rem;     /* 20px */
  --wibk-text-2xl:  1.5rem;      /* 24px */
  --wibk-text-3xl:  1.875rem;    /* 30px */
  --wibk-text-4xl:  2.25rem;     /* 36px */
  --wibk-text-5xl:  3rem;        /* 48px */
  --wibk-text-6xl:  3.75rem;     /* 60px */
  --wibk-text-7xl:  4.5rem;      /* 72px */

  /* ── Weights, leading, tracking ── */
  --wibk-weight-regular:   400;
  --wibk-weight-medium:    500;
  --wibk-weight-semibold:  600;
  --wibk-weight-bold:      700;
  --wibk-weight-extrabold: 800;

  --wibk-leading-tight:    1.15;
  --wibk-leading-snug:     1.35;
  --wibk-leading-normal:   1.65;
  --wibk-leading-relaxed:  1.75;

  --wibk-tracking-tight:   -0.02em;
  --wibk-tracking-normal:  0;
  --wibk-tracking-wide:    0.04em;
  --wibk-tracking-wider:   0.08em;
  --wibk-tracking-eyebrow: 0.22em; /* distinctive WIBK eyebrow label */

  /* ── Spacing (4px base) ── */
  --wibk-space-1:  0.25rem;
  --wibk-space-2:  0.5rem;
  --wibk-space-3:  0.75rem;
  --wibk-space-4:  1rem;
  --wibk-space-5:  1.25rem;
  --wibk-space-6:  1.5rem;
  --wibk-space-8:  2rem;
  --wibk-space-10: 2.5rem;
  --wibk-space-12: 3rem;
  --wibk-space-16: 4rem;
  --wibk-space-20: 5rem;
  --wibk-space-24: 6rem;
  --wibk-space-32: 8rem;

  /* ── Border Radius (generous, soft) ── */
  --wibk-radius-sm:   4px;
  --wibk-radius-md:   8px;
  --wibk-radius-lg:   12px;
  --wibk-radius-xl:   16px;
  --wibk-radius-2xl:  20px;
  --wibk-radius-3xl:  28px;  /* cards */
  --wibk-radius-4xl:  34px;  /* hero panels */
  --wibk-radius-full: 9999px;

  /* ── Shadows (blue-tinted, NEVER pure black) ── */
  --wibk-shadow-sm: 0 1px 2px rgba(17, 28, 43, 0.04);
  --wibk-shadow-md: 0 4px 12px rgba(17, 28, 43, 0.06);
  --wibk-shadow-lg: 0 8px 24px rgba(17, 28, 43, 0.08);
  --wibk-shadow-xl: 0 16px 48px rgba(17, 28, 43, 0.10);
  --wibk-shadow-shell-soft:      0 10px 24px rgba(20, 31, 47, 0.08);
  --wibk-shadow-shell-panel:     0 20px 54px rgba(17, 27, 42, 0.11);
  --wibk-shadow-shell-highlight: 0 18px 38px rgba(24, 33, 45, 0.16);
  --wibk-shadow-student-card:    0 24px 58px rgba(31, 53, 82, 0.12);

  /* ── Transitions ── */
  --wibk-duration-fast: 150ms;
  --wibk-duration-base: 250ms;
  --wibk-duration-slow: 400ms;
  --wibk-ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --wibk-ease-in-out:   cubic-bezier(0.45, 0, 0.55, 1);
  --wibk-ease-enter:    cubic-bezier(0.22, 1, 0.36, 1);

  /* ── Layout ── */
  --wibk-container-sm:   640px;
  --wibk-container-md:   768px;
  --wibk-container-lg:   1024px;
  --wibk-container-xl:   1280px;
  --wibk-container-2xl:  1440px;
  --wibk-container-max:  1536px;
  --wibk-header-height:  72px;

  /* ──────────────────────────────────────────────────────────────
     SEMANTIC TYPE ROLES — use these in product code
     ────────────────────────────────────────────────────────────── */
  --wibk-h1-size:   var(--wibk-text-4xl);
  --wibk-h1-weight: var(--wibk-weight-extrabold);
  --wibk-h1-leading: var(--wibk-leading-tight);
  --wibk-h1-tracking: -0.04em;

  --wibk-h2-size:   var(--wibk-text-3xl);
  --wibk-h2-weight: var(--wibk-weight-extrabold);
  --wibk-h2-tracking: -0.035em;

  --wibk-h3-size:   var(--wibk-text-xl);
  --wibk-h3-weight: var(--wibk-weight-semibold);
  --wibk-h3-tracking: -0.03em;

  --wibk-body-size:   var(--wibk-text-base);
  --wibk-body-leading: var(--wibk-leading-relaxed);

  --wibk-small-size: var(--wibk-text-sm);

  --wibk-eyebrow-size:    var(--wibk-text-xs);
  --wibk-eyebrow-weight:  var(--wibk-weight-semibold);
  --wibk-eyebrow-tracking: var(--wibk-tracking-eyebrow);
  --wibk-eyebrow-case:    uppercase;
}

/* ── Semantic element defaults (optional — opt-in per product) ── */
.wibk-prose h1, .wibk-h1 {
  font-family: var(--wibk-font-display);
  font-size: var(--wibk-h1-size);
  font-weight: var(--wibk-h1-weight);
  line-height: var(--wibk-h1-leading);
  letter-spacing: var(--wibk-h1-tracking);
  color: var(--wibk-ink);
}

.wibk-prose h2, .wibk-h2 {
  font-family: var(--wibk-font-display);
  font-size: var(--wibk-h2-size);
  font-weight: var(--wibk-h2-weight);
  letter-spacing: var(--wibk-h2-tracking);
  line-height: var(--wibk-leading-snug);
  color: var(--wibk-ink);
}

.wibk-prose h3, .wibk-h3 {
  font-family: var(--wibk-font-body);
  font-size: var(--wibk-h3-size);
  font-weight: var(--wibk-h3-weight);
  letter-spacing: var(--wibk-h3-tracking);
  color: var(--wibk-ink);
}

.wibk-prose p, .wibk-body {
  font-family: var(--wibk-font-body);
  font-size: var(--wibk-body-size);
  line-height: var(--wibk-body-leading);
  color: var(--wibk-ink);
}

.wibk-small { font-size: var(--wibk-small-size); color: var(--wibk-ink-muted); }

.wibk-eyebrow {
  font-family: var(--wibk-font-label);
  font-size: var(--wibk-eyebrow-size);
  font-weight: var(--wibk-eyebrow-weight);
  letter-spacing: var(--wibk-eyebrow-tracking);
  text-transform: var(--wibk-eyebrow-case);
  color: var(--wibk-ink-muted);
}

.wibk-code, code {
  font-family: var(--wibk-font-mono);
  font-size: 0.925em;
  background: var(--wibk-surface-sunken);
  padding: 0.15em 0.4em;
  border-radius: var(--wibk-radius-sm);
}