/* Mainhattan AI Solutions — gebuendeltes Stylesheet (tokens + base, ohne @import-Kette) */
/* --- colors.css --- */
/*
 * Mainhattan AI Solutions — Color tokens
 * Source of truth: mainhattan-ai-os/10_Design_Research/Design-system.md
 * and mainhattan-ai-website/src/styles/tokens.css (verbatim hex values — do not round).
 */

:root {
  /* Base palette */
  --mh-bg: #0d141a;           /* near-black blue-grey — dominant background */
  --mh-bg-raised: #111820;     /* secondary surface, cards, panels */
  --mh-bg-sunken: #090e12;     /* deeper recess, footers, code blocks */
  --mh-cyan: #0de6e1;          /* brand accent — controlled use only */
  --mh-cyan-strong: #21f2ed;   /* hover / high-emphasis accent */
  --mh-cyan-dim: rgba(13, 230, 225, 0.14); /* accent wash for subtle fills */
  --mh-on-accent: #0d141a;     /* text/icon color on top of cyan fills */

  --mh-white: #ffffff;
  --mh-text-muted: #c8d1d8;
  --mh-text-subtle: #8f9ba5;

  --mh-border: rgba(255, 255, 255, 0.10);
  --mh-border-strong: rgba(255, 255, 255, 0.18);
  --mh-border-accent: rgba(13, 230, 225, 0.5);

  /* Semantic aliases */
  --color-background: var(--mh-bg);
  --color-surface: var(--mh-bg-raised);
  --color-surface-sunken: var(--mh-bg-sunken);
  --color-accent: var(--mh-cyan);
  --color-accent-strong: var(--mh-cyan-strong);
  --color-accent-wash: var(--mh-cyan-dim);
  --color-on-accent: var(--mh-on-accent);

  --color-text: var(--mh-white);
  --color-text-muted: var(--mh-text-muted);
  --color-text-subtle: var(--mh-text-subtle);

  --color-border: var(--mh-border);
  --color-border-strong: var(--mh-border-strong);
  --color-border-accent: var(--mh-border-accent);

  --focus-outline: 3px solid var(--color-accent);
  --focus-outline-offset: 4px;
}

/* --- typography.css --- */
/*
 * Mainhattan AI Solutions — Typography tokens
 * Manrope is the mandated typeface (see website tokens.css). No local variable-font
 * binary was available to import — see fonts.css for the CDN substitution note.
 */

:root {
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* Logo wordmark only — never used for running UI text. See guidelines/typography */
  --font-logo: "Aspal", "Manrope", serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: clamp(1.125rem, 2vw, 1.35rem);
  --text-2xl: clamp(1.5rem, 3vw, 2rem);
  --text-3xl: clamp(2rem, 4vw, 2.75rem);
  --text-display: clamp(2.75rem, 8vw, 6.5rem);

  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  --leading-none: 0.98;
  --leading-tight: 1.15;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-wide: 0.08em;
}

/* --- spacing.css --- */
/*
 * Mainhattan AI Solutions — Spacing, radius, motion tokens
 */

:root {
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 5rem;
  --space-4xl: 8rem;

  --width-content: 72rem;
  --width-site: 80rem;

  /* Radii stay small and deliberate — this brand is not a rounded-everything SaaS look */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-none: 0;
  --radius-pill: 999px; /* reserved for primary CTA buttons only, per live-site precedent */

  --transition-fast: 180ms ease; /* @kind other */
  --transition-medium: 320ms ease; /* @kind other */
}

/* --- fonts.css --- */
/*
 * Webfont loading — vollständig selbst gehostet (keine externen CDNs).
 *
 * Manrope ist die Haupt-Schrift (--font-sans). Genutzte Schnitte: 400, 600, 700 (normal).
 * Dateien: assets/fonts/manrope-*.woff2 (offizielles Manrope-Projekt via @fontsource/manrope,
 * SIL Open Font License 1.1 — siehe assets/fonts/OFL-Manrope.txt).
 * latin + latin-ext decken den kompletten deutschsprachigen Zeichenumfang ab.
 *
 * Aspal Regular (assets/fonts/Aspal-Regular.otf) ist die Schrift des Logo-Schriftzugs.
 * Per Design-system.md darf der Logo-/Wordmark nie neu gesetzt werden — sie ist hier
 * nur zu Referenz-/Specimen-Zwecken deklariert und nicht für Fließtext zu verwenden.
 */

/* Manrope 400 (Regular) */
@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope-latin-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope-latin-ext-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Manrope 600 (Semibold) */
@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope-latin-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope-latin-ext-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Manrope 700 (Bold) */
@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope-latin-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope-latin-ext-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Aspal (Logo-Schriftzug) — unverändert */
@font-face {
  font-family: "Aspal";
  src: url("/assets/fonts/Aspal-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- base.css --- */
/* Mainhattan AI Solutions — base resets, reachable from styles.css */
:root { color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
}

h1, h2, h3, h4 {
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

p { margin: 0; }

img, svg { display: block; max-width: 100%; }

button, input, textarea, select { font: inherit; }

a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-strong); text-decoration: underline; }

:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}