/* ============================================================
   AI WORX — Design Tokens
   Brand: Unternehmensberatung für KI & Medien (Bielefeld / Wien)
   ============================================================ */

/* ---------- FONTS ------------------------------------------- */
@font-face {
  font-family: "DM Sans";
  src: url("./fonts/DMSans-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("./fonts/DMSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("./fonts/DMSans-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("./fonts/DMSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("./fonts/DMSans-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("./fonts/DMSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("./fonts/DMSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("./fonts/DMSans-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("./fonts/DMSans-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("./fonts/DMSans-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- ROOT TOKENS ------------------------------------- */
:root {
  /* ----- Brand palette (sampled from official AI WORX color guide) ----- */
  --aw-ink:          #20282D;     /* Basistext / Überschriften — deep teal-ink */
  --aw-ink-soft:     #273A40;     /* alt deep teal, slightly warmer */
  --aw-graphite:     #2E3439;     /* dark surface */
  --aw-white:        #FFFFFF;     /* page background */
  --aw-paper:        #F7F8F8;     /* very faint cool off-white */
  --aw-bone:         #EEF1F2;     /* alt section background, cool */

  /* Brass accent — the ONE warm tone, used for links + key highlights */
  --aw-brass:        #AD9C69;     /* primary accent: links, underlines, focus */
  --aw-brass-deep:   #8C7E51;     /* hover/active variant */
  --aw-brass-soft:   #D3CEBF;     /* tints, chips */

  /* Steel-blue neutrals — cool grayscale ramp */
  --aw-n-50:  #F0F0F1;
  --aw-n-100: #E2E5E7;
  --aw-n-200: #C5D7DB;            /* pale steel — borders, soft surfaces */
  --aw-n-300: #A8B5B9;
  --aw-n-400: #728287;            /* "Ränder" — body borders, captions */
  --aw-n-500: #51565A;            /* secondary text */
  --aw-n-600: #3F464B;
  --aw-n-700: #2E3439;
  --aw-n-800: #273A40;
  --aw-n-900: #20282D;            /* primary ink */

  /* Legacy alias kept for any direct references */
  --aw-black: var(--aw-ink);

  /* Semantic */
  --aw-success: #2F7D32;
  --aw-warning: #C18A14;
  --aw-danger:  #B23A3A;
  --aw-info:    #2E6BB8;

  /* Foreground / background semantic */
  --fg-1: var(--aw-ink);          /* primary text */
  --fg-2: var(--aw-n-500);        /* secondary text */
  --fg-3: var(--aw-n-400);        /* tertiary, captions */
  --fg-link: var(--aw-brass);     /* link color */
  --fg-inv: var(--aw-white);      /* on dark surfaces */

  --bg-page:    var(--aw-white);
  --bg-surface: var(--aw-white);
  --bg-alt:     var(--aw-bone);
  --bg-dark:    var(--aw-ink);

  --border-1: var(--aw-n-100);    /* hairline */
  --border-2: var(--aw-n-200);    /* card outline */
  --border-strong: var(--aw-ink); /* strong emphasis border */

  /* ----- Type families ----- */
  --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "DM Sans", -apple-system, sans-serif; /* heavier weights for display */
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ----- Type scale (modular, optical-sized via DM Sans 18pt/24pt/36pt) ----- */
  --fs-display-xl: clamp(48px, 7.5vw, 96px);   /* hero, single-screen statements */
  --fs-display-lg: clamp(40px, 5.5vw, 72px);
  --fs-display-md: clamp(32px, 4vw, 56px);
  --fs-h1: 44px;
  --fs-h2: 34px;
  --fs-h3: 26px;
  --fs-h4: 20px;
  --fs-h5: 17px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;
  --fs-eyebrow: 13px;

  /* line heights */
  --lh-tight:   1.05;
  --lh-snug:    1.18;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  /* tracking */
  --ls-tight:    -0.02em;
  --ls-snug:     -0.01em;
  --ls-normal:    0;
  --ls-eyebrow:   0.06em;   /* moderate tracking for SECTION LABELS like "Change Management" */
  --ls-button:    0.04em;

  /* ----- Spacing ----- */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ----- Radii — small to none. AI WORX is geometric / sharp ----- */
  --r-0:    0;
  --r-xs:   3px;     /* default for buttons / inputs — soft, not square */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   14px;
  --r-pill: 999px;

  /* ----- Shadows — used sparingly. Mostly hairline borders. ----- */
  --sh-0: none;
  --sh-1: 0 1px 2px rgba(10,10,10,0.04), 0 0 0 1px var(--border-1);
  --sh-2: 0 4px 12px rgba(10,10,10,0.06), 0 0 0 1px var(--border-1);
  --sh-3: 0 12px 32px rgba(10,10,10,0.08), 0 0 0 1px var(--border-1);
  --sh-focus: 0 0 0 3px rgba(173,156,105,0.45);

  /* ----- Layout ----- */
  --container-max: 1240px;
  --container-pad: clamp(20px, 4vw, 40px);

  /* ----- Motion ----- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-std:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  140ms;
  --dur-base:  220ms;
  --dur-slow:  420ms;
}

/* ---------- BASE / SEMANTIC -------------------------------- */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-page);
}

h1, h2, h3, h4, h5 { font-family: var(--font-display); color: var(--fg-1); margin: 0; text-wrap: balance; }
h1 { font-size: var(--fs-h1); font-weight: 800; line-height: var(--lh-snug); letter-spacing: var(--ls-tight); }
h2 { font-size: var(--fs-h2); font-weight: 800; line-height: var(--lh-snug); letter-spacing: var(--ls-tight); }
h3 { font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-snug); letter-spacing: var(--ls-snug); }
h4 { font-size: var(--fs-h4); font-weight: 700; line-height: 1.3; }
h5 { font-size: var(--fs-h5); font-weight: 600; line-height: 1.35; }

p  { margin: 0; line-height: var(--lh-relaxed); color: var(--fg-1); text-wrap: pretty; }
p.muted, .muted { color: var(--fg-2); }
small, .caption { font-size: var(--fs-caption); color: var(--fg-3); }

/* Eyebrow — the all-caps wide-tracked section label used on the AI WORX site
   (e.g. "Change Management", "Kick-Off", "Ihre Ansprechpartner") */
.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--fg-2);
}

/* Display utility for hero-style statements */
.display-xl { font-size: var(--fs-display-xl); font-weight: 800; line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.display-lg { font-size: var(--fs-display-lg); font-weight: 800; line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.display-md { font-size: var(--fs-display-md); font-weight: 700; line-height: var(--lh-snug); letter-spacing: var(--ls-snug); }

/* The signature highlighter — brass marker behind a phrase. */
.mark, mark.aw {
  background: linear-gradient(180deg, transparent 60%, var(--aw-brass-soft) 60%);
  color: inherit;
  padding: 0 0.08em;
}

/* Quote block — used heavily on the site for partner quotes */
.quote {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--ls-snug);
  color: var(--fg-1);
}
.quote::before { content: "„"; }
.quote::after  { content: "“"; }

/* Code / mono */
code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--aw-n-100);
  padding: 0.1em 0.35em;
  border-radius: var(--r-xs);
}

/* Default link */
a {
  color: var(--aw-brass);
  text-decoration: underline;
  text-decoration-color: var(--aw-brass);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color var(--dur-base) var(--ease-out);
}
a:hover { color: var(--aw-brass-deep); text-decoration-color: var(--aw-brass-deep); }

/* Selection — ink fill, white text (per "Textauswahl" guide swatch) */
::selection { background: var(--aw-ink); color: var(--aw-white); }