/* ============================================================================
   STEINBEIS-TRANSFERZENTRUM ANGEWANDTE KÜNSTLICHE INTELLIGENZ (AKI)
   Foundational design tokens — colour + typography
   ----------------------------------------------------------------------------
   Colour values are taken verbatim from the official Steinbeis "Farb-Styleguide
   für SU-Medien". Navy #003f63 is the Steinbeis Dachmarke (umbrella) colour and
   the primary brand colour. Teal #097c94 is the Steinbeis-Transferzentren
   business-area colour and is used here as the centre's accent.

   TYPEFACES:
     • Headings (Überschriften) → JOST
     • Body text                → ARIAL
   'Jost' is a geometric sans (a faithful Futura-style revival) loaded free from
   Google Fonts — it is the official heading typeface here. Arial is a system
   font available on virtually every device. See README → VISUAL FOUNDATIONS.
   ========================================================================== */

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

:root {
  /* ---------------------------------------------------------------------- *
   * BRAND — Steinbeis Navy (Dachmarke / primary)                           *
   * Base = #003f63                                                          *
   * ---------------------------------------------------------------------- */
  --navy-950: #001a2b;
  --navy-900: #002338;
  --navy-800: #00304b;
  --navy-700: #003f63;   /* ★ PRIMARY BRAND — logo navy */
  --navy-600: #0a5078;
  --navy-500: #1a648f;
  --navy-400: #3f80a8;
  --navy-300: #79a4c3;
  --navy-200: #b4cbdd;
  --navy-100: #dde8f0;
  --navy-50:  #eff5f9;

  /* ---------------------------------------------------------------------- *
   * ACCENT — Steinbeis-Transferzentren Teal                                *
   * Base = #097c94                                                          *
   * ---------------------------------------------------------------------- */
  --teal-800: #064552;
  --teal-700: #065d6e;
  --teal-600: #097c94;   /* ★ CENTRE ACCENT */
  --teal-500: #0f96b1;
  --teal-400: #3eb0c8;
  --teal-300: #82ccdc;
  --teal-200: #b9e2eb;
  --teal-100: #d9eff4;
  --teal-50:  #eef8fb;

  /* ---------------------------------------------------------------------- *
   * HIGHLIGHTS — two deliberate accent colours (use sparingly + on purpose)*
   * The identity is navy + teal. These two highlights add energy for data   *
   * viz, key metrics, editorial call-outs and hover/active flourishes —     *
   * they NEVER become a primary or replace navy/teal. The other Steinbeis    *
   * Geschäftsbereich colours are NOT used by this centre.                    *
   * ---------------------------------------------------------------------- */
  --coral-deep: #b8431f;   /* text on light */
  --coral:      #e15a3c;   /* ★ HIGHLIGHT 1 — warm */
  --coral-soft: #fbe4dd;   /* tint / background */
  --lime-deep:  #5d7414;   /* text on light */
  --lime:       #8fb033;   /* ★ HIGHLIGHT 2 — fresh */
  --lime-soft:  #eef4da;   /* tint / background */

  /* ---------------------------------------------------------------------- *
   * NEUTRALS — cool, navy-tinted greys                                     *
   * ---------------------------------------------------------------------- */
  --ink:       #0d1a23;
  --gray-900:  #16242e;
  --gray-800:  #283742;
  --gray-700:  #3a4a55;
  --gray-600:  #556570;
  --gray-500:  #6e7d88;
  --gray-400:  #94a2ac;
  --gray-300:  #c0cad1;
  --gray-200:  #dde3e8;
  --gray-150:  #e7ecef;
  --gray-100:  #f1f4f6;
  --gray-50:   #f7f9fa;
  --white:     #ffffff;

  /* ---------------------------------------------------------------------- *
   * SEMANTIC ROLES                                                         *
   * ---------------------------------------------------------------------- */
  --color-primary:        var(--navy-700);
  --color-primary-hover:  var(--navy-800);
  --color-primary-press:  var(--navy-900);
  --color-accent:         var(--teal-600);
  --color-accent-hover:   var(--teal-700);

  --fg-1: var(--ink);        /* headings, primary text */
  --fg-2: var(--gray-700);   /* body text */
  --fg-3: var(--gray-500);   /* muted / supporting */
  --fg-4: var(--gray-400);   /* faint / disabled */
  --fg-on-dark:        #ffffff;
  --fg-on-dark-muted:  rgba(255,255,255,0.72);
  --fg-on-dark-faint:  rgba(255,255,255,0.52);

  --bg-1: var(--white);      /* page */
  --bg-2: var(--gray-50);    /* subtle panel */
  --bg-3: var(--gray-100);   /* inset / sunken */
  --bg-dark:    var(--navy-700);
  --bg-darker:  var(--navy-900);

  --border:        var(--gray-200);
  --border-strong: var(--gray-300);
  --border-on-dark: rgba(255,255,255,0.18);

  --success: #1f8a5b;
  --warning: #d08700;   /* functional UI status only — not a brand colour */
  --error:   #c0392b;
  --info:    var(--teal-700);  /* on-brand informational */

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(15,150,177,0.45);

  /* ---------------------------------------------------------------------- *
   * TYPOGRAPHY — families (Steinbeis Hausschrift)                          *
   * Headings = Jost · Body = Arial                                         *
   * ---------------------------------------------------------------------- */
  --font-heading: 'Jost', 'Century Gothic', system-ui, sans-serif;
  --font-body:    Arial, 'Liberation Sans', 'Helvetica Neue', Helvetica, sans-serif;
  --font-sans:    var(--font-body);   /* generic alias → body */
  --font-serif:   var(--font-heading);/* brand has no serif; map to Jost */
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Weights — Jost headings carry the full range; Arial body only has
     regular(400) + bold(700), so --w-light/medium degrade gracefully on body. */
  --w-light:    300; /* @kind font */
  --w-regular:  400; /* @kind font */
  --w-medium:   500; /* @kind font */
  --w-semibold: 600; /* @kind font */
  --w-bold:     700; /* @kind font */
  --w-extra:    700; /* @kind font */

  /* ---------------------------------------------------------------------- *
   * TYPE SCALE  (1.250 major-third, 16px base)                             *
   * ---------------------------------------------------------------------- */
  /* Responsive sizes are split out so the `font:` shorthands below stay free of
     top-level commas (clamp() commas otherwise read as a font-family list). */
  --text-display-size: clamp(2.75rem, 1.6rem + 5.0vw, 4.5rem);  /* @kind spacing */
  --text-h1-size:      clamp(2.1rem, 1.4rem + 3.0vw, 3.0rem);   /* @kind spacing */
  --text-h2-size:      clamp(1.65rem, 1.2rem + 1.8vw, 2.25rem); /* @kind spacing */
  --text-h3-size:      clamp(1.3rem, 1.05rem + 1.0vw, 1.6rem);  /* @kind spacing */
  --text-display: 700 var(--text-display-size)/1.06 var(--font-heading);
  --text-h1:      700 var(--text-h1-size)/1.1 var(--font-heading);
  --text-h2:      700 var(--text-h2-size)/1.16 var(--font-heading);
  --text-h3:      600 var(--text-h3-size)/1.24 var(--font-heading);
  --text-h4:      600 1.2rem/1.3 var(--font-heading);
  --text-body-lg: 400 1.1875rem/1.62 var(--font-body);
  --text-body:    400 1.0625rem/1.62 var(--font-body);
  --text-body-sm: 400 0.9375rem/1.55 var(--font-body);
  --text-caption: 400 0.8125rem/1.45 var(--font-body);
  --text-overline:600 0.75rem/1.3 var(--font-heading);
  --text-code:    500 0.9375rem/1.55 var(--font-mono);

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-overline: 0.14em;

  /* ---------------------------------------------------------------------- *
   * SPACING — 4px base scale                                               *
   * ---------------------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---------------------------------------------------------------------- *
   * RADII — geometric, restrained (echoes the square logo mark)            *
   * ---------------------------------------------------------------------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ---------------------------------------------------------------------- *
   * ELEVATION — soft, navy-tinted shadows (never pure black)               *
   * ---------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(0,40,63,0.06);
  --shadow-sm: 0 1px 3px rgba(0,40,63,0.08), 0 1px 2px rgba(0,40,63,0.06);
  --shadow-md: 0 4px 12px rgba(0,40,63,0.09), 0 2px 4px rgba(0,40,63,0.06);
  --shadow-lg: 0 12px 28px rgba(0,40,63,0.12), 0 4px 8px rgba(0,40,63,0.06);
  --shadow-xl: 0 24px 56px rgba(0,40,63,0.16);

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 360ms; /* @kind other */

  /* Layout */
  --container-max: 1200px;
  --container-wide: 1400px;
  --container-text: 720px;
}

/* ============================================================================
   SEMANTIC ELEMENT DEFAULTS — opt-in via .ds-prose or use the utility classes
   ========================================================================== */
.ds-overline {
  font: var(--text-overline);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--color-accent);
}
.ds-display { font: var(--text-display); letter-spacing: var(--tracking-tight); color: var(--fg-1); text-wrap: balance; }
.ds-h1 { font: var(--text-h1); letter-spacing: var(--tracking-tight); color: var(--fg-1); text-wrap: balance; }
.ds-h2 { font: var(--text-h2); letter-spacing: var(--tracking-tight); color: var(--fg-1); text-wrap: balance; }
.ds-h3 { font: var(--text-h3); color: var(--fg-1); }
.ds-h4 { font: var(--text-h4); color: var(--fg-1); }
.ds-body-lg { font: var(--text-body-lg); color: var(--fg-2); text-wrap: pretty; }
.ds-body { font: var(--text-body); color: var(--fg-2); text-wrap: pretty; }
.ds-body-sm { font: var(--text-body-sm); color: var(--fg-2); }
.ds-caption { font: var(--text-caption); color: var(--fg-3); }
.ds-mono { font: var(--text-code); color: var(--fg-2); }
.ds-lead { font: var(--w-regular) clamp(1.25rem,1.05rem+0.9vw,1.6rem)/1.5 var(--font-body); color: var(--fg-2); text-wrap: pretty; }