/* ============================================================
   HIERHOLZER | DPC — Design Tokens
   Colors, type, spacing, radii, shadows
   ============================================================ */

/* --- Self-hosted brand fonts --- */
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/space-grotesk-400.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/space-grotesk-500.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/space-grotesk-600.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/space-grotesk-700.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/jetbrains-mono-400.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/jetbrains-mono-500.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/jetbrains-mono-600.woff2") format("woff2"); }

:root {
  /* --- Brand Colors (from Farbpalette Final) --- */
  --dpc-deep-teal:     #0B4F6C;  /* Primary brand — headers, logo frames */
  --dpc-dark-navy:     #0B2E3F;  /* Deep backgrounds, dark surfaces */
  --dpc-ocean-blue:    #1A8FBF;  /* Secondary — gradient stop, links */
  --dpc-mist:          #EDF6FB;  /* Cool near-white — surface alt, pills */
  --dpc-white:         #F8FAFC;  /* Canvas white (slightly cool) */
  --dpc-pure-white:    #FFFFFF;

  /* --- Neutral text ramp (Slate, aligned with #475569 body) --- */
  --dpc-slate-900: #0F172A;
  --dpc-slate-800: #1E293B;
  --dpc-slate-700: #334155;
  --dpc-slate-600: #475569;  /* Body text default */
  --dpc-slate-500: #64748B;
  --dpc-slate-400: #94A3B8;
  --dpc-slate-300: #CBD5E1;
  --dpc-slate-200: #E2E8F0;
  --dpc-slate-100: #F1F5F9;

  /* --- Semantic foreground / background --- */
  --fg-1: var(--dpc-slate-900);        /* Headlines */
  --fg-2: var(--dpc-slate-600);        /* Body */
  --fg-3: var(--dpc-slate-400);        /* Muted, captions */
  --fg-inverse: var(--dpc-white);
  --fg-accent: var(--dpc-ocean-blue);
  --fg-brand: var(--dpc-deep-teal);

  --bg-canvas:  var(--dpc-white);
  --bg-surface: var(--dpc-pure-white);
  --bg-alt:     var(--dpc-mist);
  --bg-dark:    var(--dpc-dark-navy);
  --bg-brand:   var(--dpc-deep-teal);

  --border-subtle: var(--dpc-slate-200);
  --border-default: var(--dpc-slate-300);
  --border-strong:  var(--dpc-slate-600);

  /* --- Semantic feedback (derived, kept on-brand) --- */
  --feedback-success: #10B981;   /* Used in "wo ja" positive boxes (hint of teal-green) */
  --feedback-success-bg: #E8F7F0;
  --feedback-danger:  #E11D48;
  --feedback-danger-bg: #FDECEE;
  --feedback-info:    var(--dpc-ocean-blue);
  --feedback-info-bg: var(--dpc-mist);

  /* --- Signature gradients --- */
  --gradient-hero: linear-gradient(135deg, #0B2E3F 0%, #0B4F6C 55%, #1A8FBF 100%);   /* @kind color */
  --gradient-card-dark: linear-gradient(140deg, #0B2E3F 0%, #0B4F6C 100%);   /* @kind color */

  /* --- Typography --- */
  --font-brand: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-body:  "Space Grotesk", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace;

  /* Font weights present in brand use */
  --fw-regular: 400;   /* @kind font */
  --fw-medium:  500;   /* @kind font */
  --fw-semibold: 600;   /* @kind font */
  --fw-bold:    700;   /* @kind font */
  --fw-black:   900;   /* @kind font */

  /* Type sizes */
  --fs-xs:   12px;
  --fs-sm:   14px;   /* Fliesstext per brand */
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  32px;
  --fs-3xl:  40px;
  --fs-4xl:  56px;
  --fs-5xl:  72px;

  /* Line heights */
  --lh-tight:  1.1;   /* @kind font */
  --lh-snug:   1.25;   /* @kind font */
  --lh-normal: 1.5;   /* @kind font */
  --lh-relaxed:1.65;   /* @kind font */

  /* Letter-spacing (brand uses heavy tracking) */
  --ls-tightest: -0.02em;   /* @kind font */
  --ls-tight:    -0.01em;   /* @kind font */
  --ls-normal:   0;   /* @kind font */
  --ls-wide:     0.08em;   /* @kind font */
  --ls-wider:    0.14em;   /* @kind font */  /* SUBLINE DIGITAL PROCESS CONSULTING ≈ +3.5px at 24px */
  --ls-widest:   0.22em;   /* @kind font */  /* Micro caps eyebrows */

  /* --- Spacing scale (4px base) --- */
  --space-0: 0;
  --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;

  /* --- Radii --- */
  --radius-none: 0;
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;   /* Default card */
  --radius-xl:   18px;   /* Hero cards, business card */
  --radius-2xl:  24px;
  --radius-pill: 999px;

  /* --- Shadows (soft, layered — matches brand card treatment) --- */
  --shadow-xs:  0 1px 2px rgba(11, 46, 63, 0.05);
  --shadow-sm:  0 2px 4px rgba(11, 46, 63, 0.06), 0 1px 2px rgba(11, 46, 63, 0.04);
  --shadow-md:  0 8px 20px rgba(11, 46, 63, 0.08), 0 2px 6px rgba(11, 46, 63, 0.04);
  --shadow-lg:  0 16px 40px rgba(11, 46, 63, 0.12), 0 4px 12px rgba(11, 46, 63, 0.06);
  --shadow-dark-card: 0 20px 50px rgba(11, 46, 63, 0.28), 0 6px 16px rgba(11, 46, 63, 0.14);
  --shadow-accent: 0 8px 24px rgba(26, 143, 191, 0.28);

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

/* ============================================================
   Semantic type classes
   ============================================================ */

.dpc-wordmark {
  font-family: var(--font-brand);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-wide);
  text-transform: none;
  line-height: var(--lh-tight);
}
.dpc-wordmark .dpc-accent { color: var(--dpc-ocean-blue); }
.dpc-wordmark .dpc-divider {
  color: var(--dpc-slate-400);
  font-weight: var(--fw-regular);
  margin: 0 0.35em;
}

.dpc-subline {
  font-family: var(--font-brand);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  font-size: var(--fs-sm);
  color: var(--dpc-ocean-blue);
}

.dpc-claim {
  font-family: var(--font-brand);
  font-weight: var(--fw-regular);
  font-style: italic;
  color: var(--dpc-white);
}

.dpc-eyebrow {
  font-family: var(--font-brand);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--dpc-slate-400);
}

h1, .dpc-h1 {
  font-family: var(--font-brand);
  font-weight: var(--fw-black);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  margin: 0;
}
h2, .dpc-h2 {
  font-family: var(--font-brand);
  font-weight: var(--fw-bold);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  margin: 0;
}
h3, .dpc-h3 {
  font-family: var(--font-brand);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}
h4, .dpc-h4 {
  font-family: var(--font-brand);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}

p, .dpc-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-sm);          /* Brand spec: 14px */
  line-height: var(--lh-relaxed);
  color: var(--fg-2);               /* #475569 */
  margin: 0;
}
.dpc-body-lg {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
}
.dpc-caption {
  font-size: var(--fs-xs);
  color: var(--fg-3);
  line-height: var(--lh-normal);
}
code, .dpc-mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--dpc-deep-teal);
  background: var(--dpc-mist);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-xs);
}