/*
  M.E.S.S. brand – SSoT for tokens, typography, and base document styles.
  Deploy: https://mess.engineering/brand/css/brand.css
  External tools: link via absolute URL. Homepage: relative path.
*/

@font-face {
  font-family: Orbitron;
  src: url("../fonts/Orbitron-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: Inter;
  src: url("../fonts/Inter-VariableFont_opsz-wght.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Background / UI */
  --bg: #05070a;
  --bg-soft: #0b0f14;
  --surface: #11161d;

  --text: #f3f7fa;
  --muted: #aab6c3;
  --line: rgba(255, 255, 255, 0.10);

  /* Layout */
  --panel: rgba(255, 255, 255, 0.04);
  --panel-strong: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.12);
  --radius: 24px;
  --radius-sm: 18px;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  --maxw: 1200px;

  /* WETTER ecosystem */
  --dampf: #00fff2;
  --dampf-a13: color-mix(in srgb, var(--dampf) 13%, transparent);
  --dampf-a16: color-mix(in srgb, var(--dampf) 16%, transparent);
  --dampf-a70: color-mix(in srgb, var(--dampf) 70%, transparent);
  --dampf-a75: color-mix(in srgb, var(--dampf) 75%, transparent);
  --wolke: #ffffff;
  --blitz: #ff5a4f;
  --keim: #9ccc65;
  --sonne: #e8c547;

  /* future modules */
  --magenta: #ff00ff;
  --violett: var(--magenta); /* legacy WETTER slot name; same as accent */
  --blau: #4f8cff;
  --orange: #ff9f1c;

  /*
   * Brand accent (SSoT): --magenta is the canonical hex; --accent is the UI alias.
   * Change only --magenta in brand.json/css. Use var(--accent) or --accent-* in components.
   */
  --accent: var(--magenta);
  --accent-2: var(--dampf);

  /* Accent derivatives (no hardcoded magenta rgba in page CSS) */
  --accent-a13: color-mix(in srgb, var(--accent) 13%, transparent);
  --accent-a16: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-a32: color-mix(in srgb, var(--accent) 32%, transparent);
  --accent-a40: color-mix(in srgb, var(--accent) 40%, transparent);
  --accent-a50: color-mix(in srgb, var(--accent) 50%, transparent);
  --accent-a75: color-mix(in srgb, var(--accent) 75%, transparent);
  --accent-button-fill: linear-gradient(
    118deg,
    color-mix(in srgb, var(--accent) 14%, transparent) 0%,
    color-mix(in srgb, var(--accent) 42%, transparent) 36%,
    color-mix(in srgb, var(--wolke) 18%, var(--accent) 26%) 50%,
    color-mix(in srgb, var(--accent) 38%, transparent) 64%,
    color-mix(in srgb, var(--accent) 16%, transparent) 100%
  );
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  scroll-behavior: smooth;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-color: var(--dampf) var(--bg);
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 10px;
  background: var(--bg);
}

::-webkit-scrollbar-track {
  background: var(--bg);
  border-left: 1px solid rgba(0, 255, 242, 0.1);
}

::-webkit-scrollbar-thumb {
  background: var(--dampf);
  border-radius: 2px;
  box-shadow: 0 0 10px var(--dampf);
  border: 2px solid var(--bg);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--wolke);
  box-shadow: 0 0 15px var(--wolke);
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  height: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: visible;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(0, 255, 242, 0.07), transparent 26%),
    radial-gradient(circle at top right, rgba(255, 90, 79, 0.06), transparent 24%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

a {
  color: inherit;
  text-decoration: none;
}