/* ============================================================
   Mit-KI / Unusual Thinkers — Design Tokens
   Quelle: design_handoff_mit_ki_website/_ds/**/tokens/*.css
   ============================================================ */

/* ---- Webfonts (lokal, kein CDN) ---- */
@font-face {
  font-family: 'Manrope';
  src: url('../assets/fonts/Manrope-Variable.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Prosto One';
  src: url('../assets/fonts/ProstoOne-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Basispalette (Brand) ---- */
  --white: #ffffff;
  --ink: #333f50;
  --ink-deep: #23365f;

  --blue-primary: #3458ab;
  --blue-bright: #196bb8;

  --pink: #d3078b;
  --green: #3f8a33;

  --green-light: #6cc05f;
  --yellow: #fcdb48;
  --orange: #df7f2f;
  --purple: #8a278e;

  --teal: #12bcbc;
  --sky: #00afe9;
  --coral: #f15b21;

  /* ---- abgeleitete Neutrals ---- */
  --gray-50:  oklch(from var(--ink) 0.985 0.003 h);
  --gray-100: oklch(from var(--ink) 0.96 0.006 h);
  --gray-200: oklch(from var(--ink) 0.91 0.010 h);
  --gray-300: oklch(from var(--ink) 0.83 0.014 h);
  --gray-400: oklch(from var(--ink) 0.68 0.018 h);
  --gray-500: oklch(from var(--ink) 0.54 0.022 h);
  --gray-600: oklch(from var(--ink) 0.42 0.024 h);
  --gray-700: oklch(from var(--ink) 0.32 0.022 h);

  --red: #d24343;

  /* ---- semantische Aliase ---- */
  --surface-page: var(--white);
  --surface-card: var(--white);
  --surface-sunken: var(--gray-50);
  --surface-deep: var(--ink-deep);
  --surface-overlay: color-mix(in oklch, var(--ink-deep) 60%, transparent);

  --text-primary: var(--ink);
  --text-secondary: var(--gray-500);
  --text-muted: var(--gray-400);
  --text-on-dark: var(--white);
  --text-on-primary: var(--white);
  --text-link: var(--blue-bright);

  --border-default: var(--gray-200);
  --border-strong: var(--gray-300);

  --accent-primary: var(--blue-primary);
  --accent-primary-hover: var(--blue-bright);
  --accent-primary-active: color-mix(in oklch, var(--blue-primary) 80%, black);

  --state-success: var(--green);
  --state-success-bg: color-mix(in oklch, var(--green) 12%, white);
  --state-warning: var(--orange);
  --state-warning-bg: color-mix(in oklch, var(--yellow) 30%, white);
  --state-danger: var(--red);
  --state-danger-bg: color-mix(in oklch, var(--red) 10%, white);
  --state-info: var(--blue-bright);
  --state-info-bg: color-mix(in oklch, var(--sky) 14%, white);

  --focus-ring: var(--blue-bright);

  /* ---- Thinker-Spektrum (geordnete Akzentreihe) ---- */
  --spectrum-1: var(--coral);
  --spectrum-2: var(--orange);
  --spectrum-3: var(--yellow);
  --spectrum-4: var(--green-light);
  --spectrum-5: var(--green);
  --spectrum-6: var(--teal);
  --spectrum-7: var(--sky);
  --spectrum-8: var(--blue-primary);
  --spectrum-9: var(--purple);
  --spectrum-10: var(--pink);

  /* ---- Typografie ---- */
  --font-display: 'Prosto One', ui-rounded, 'Segoe UI', sans-serif;
  --font-body: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  --text-xs: 13px;
  --text-sm: 15px;
  --text-base: 17px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 30px;
  --text-3xl: 38px;
  --text-4xl: 48px;
  --text-5xl: 64px;
  --text-6xl: 84px;

  --leading-tight: 1.08;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.09em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* ---- Spacing / Radius / Größen (4-px-Raster) ---- */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-full: 999px;

  --control-height-sm: 36px;
  --control-height-md: 44px;
  --control-height-lg: 52px;

  --container-max: 1200px;

  /* ---- Schatten / Motion ---- */
  --shadow-sm: 0 1px 2px color-mix(in oklch, var(--ink) 10%, transparent);
  --shadow-md: 0 4px 16px color-mix(in oklch, var(--ink) 12%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in oklch, var(--ink) 16%, transparent);
  --shadow-focus: 0 0 0 3px color-mix(in oklch, var(--focus-ring) 35%, transparent);

  --blur-glass: 16px;
  --overlay-scrim: color-mix(in oklch, var(--ink-deep) 55%, transparent);

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 360ms;
}