/* =============================================================
   Hackbarth Design System — v2 design tokens
   Warm editorial palette: cream paper + deep ink + forest green
   ============================================================= */

/* Fonts via Bunny Fonts — EU-hosted drop-in replacement for Google Fonts.
   No IP transfer to Google, DSGVO-compliant without consent banner.
   See https://fonts.bunny.net */
@import url('https://fonts.bunny.net/css?family=dm-serif-display:400i,400|outfit:300,400,500,600,700|jetbrains-mono:400,500,600&display=swap');

:root {
  /* ---------- COLOR ---------- */

  /* Surfaces */
  --bg:               #f4f1ec;     /* warm cream paper — primary canvas */
  --bg-elev:          #fdfbf6;     /* warm-tinted card surface (was pure #fff; tinted toward cream anchor for cohesion) */
  --bg-elev-2:        #fbf8f3;     /* tinted nested panel */
  --bg-ink:           #0a0f1a;     /* dark inverted surface (credentials, CTA hero card) */
  --bg-scrim:         rgba(10,15,26,0.6);

  /* Foreground
     A11y note: --fg-dim and --fg-mute were lightened slip-shod (#6b7280 / #9ca3af)
     and failed WCAG AA at 4.27:1 and 2.22:1 against cream paper. Darkened to pass
     4.5:1 minimum for normal body text. */
  --fg:               #0a0f1a;     /* deep ink, primary text */
  --fg-strong:        #0a0f1a;
  --fg-dim:           #535862;     /* secondary text — was #6b7280, now ~6.3:1 on cream */
  --fg-mute:          #6e7480;     /* tertiary, captions — was #9ca3af, now ~4.6:1 on cream */
  --fg-disabled:      rgba(10,15,26,0.35);

  /* Foreground on dark surfaces (for inverted sections) */
  --fg-on-dark:       #f4f1ec;
  --fg-dim-on-dark:   rgba(244,241,236,0.7);    /* was 0.6 → ~4.5:1 on bg-ink */
  --fg-mute-on-dark:  rgba(244,241,236,0.55);   /* was 0.4 (3.07:1) → ~4.5:1 */

  /* Borders & hairlines */
  --border:           rgba(10,15,26,0.08);
  --border-strong:    rgba(10,15,26,0.16);
  --border-on-dark:   rgba(244,241,236,0.08);

  /* Accents */
  --accent:            #1a6b4e;    /* forest green — primary brand */
  --accent-hover:      #145a40;
  --accent-light:      #e8f3ee;    /* mint tint */
  --accent-glow:       #2dd4a0;    /* bright pulse green (use sparingly) */
  --accent-warm:       #c9784d;    /* terracotta — accent counterpoint */
  --accent-warm-light: #f5e8df;

  /* Italic-serif accent inherits accent (forest) */
  --serif-accent:      var(--accent);

  /* Semantic */
  --success:          #1a6b4e;
  --warning:          #d97706;
  --danger:           #b91c1c;
  --info:             var(--accent);

  /* Legacy alias map (so older components keep working during transition) */
  --accent-cyan:       var(--accent);
  --accent-cyan-soft:  var(--accent-light);
  --accent-cyan-glow:  rgba(26,107,78,0.25);
  --accent-amber:      var(--accent-warm);
  --accent-amber-soft: var(--accent-warm-light);
  --accent-violet:     var(--accent-warm);

  /* ---------- TYPOGRAPHY ---------- */

  /* Family stacks */
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'Outfit', system-ui, sans-serif;
  --font-serif:   'DM Serif Display', Georgia, serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --font-headline: var(--font-display);

  /* Headline tuning (defaults the website variants can override) */
  --headline-weight:  400;
  --headline-leading: 1.12;
  --headline-tracking:-0.025em;
  --headline-case:    none;

  /* Type scale — base 16, modular */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   32px;
  --text-3xl:   40px;
  --text-4xl:   56px;
  --text-5xl:   72px;
  --text-6xl:   96px;

  /* Line heights */
  --leading-tight:  1.1;
  --leading-snug:   1.2;
  --leading-normal: 1.5;
  --leading-loose:  1.75;

  /* Tracking */
  --track-tight:  -0.025em;
  --track-normal:  0;
  --track-wide:    0.04em;
  --track-eyebrow: 0.12em;

  /* Weights — Outfit goes from 300 to 700 */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---------- SPACING (4-px base) ---------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-6:   24px;
  --space-8:   32px;
  --space-12:  48px;
  --space-16:  64px;
  --space-24:  96px;
  --space-32:  128px;

  /* ---------- RADII ---------- */
  --radius-sm:   8px;
  --radius-md:   14px;     /* small cards, service icons */
  --radius-lg:   20px;     /* card default */
  --radius-xl:   24px;     /* hero card */
  --radius-pill: 999px;    /* buttons and tags are pills in this system */

  /* ---------- SHADOWS ---------- */
  --shadow-card:  0 12px 40px rgba(10,15,26,0.06);
  --shadow-lift:  0 20px 60px rgba(26,107,78,0.08);   /* accent-tinted lift on hover */
  --shadow-cta:   0 8px 30px rgba(26,107,78,0.25);
  --shadow-glow:  0 12px 40px rgba(0,0,0,0.15);       /* generic depth on dark elements */
  --shadow-amber: 0 8px 30px rgba(201,120,77,0.25);

  /* ---------- MOTION ---------- */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.4, 0.0, 0.2, 1);
  --duration-micro:  150ms;
  --duration-base:   350ms;
  --duration-entry:  600ms;
  --duration-hero:   800ms;

  /* ---------- LAYOUT ---------- */
  --width-content: 1280px;
  --width-prose:   62ch;
  --nav-height:    72px;
}

/* =============================================================
   Semantic type styles
   ============================================================= */

.h-hero, h1.hero {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5vw, 4.2rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 400;
  color: var(--fg-strong);
  text-wrap: balance;
}
.h-hero em, h1.hero em {
  font-style: italic;
  color: var(--accent);
}

.h1, h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 400;
  color: var(--fg-strong);
  text-wrap: balance;
}

.h2, h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--fg-strong);
  text-wrap: balance;
}

.h3, h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--fg-strong);
}

.h4, h4 {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--fg);
}

.p, p, .body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  font-weight: 400;
  color: var(--fg);
  text-wrap: pretty;
}

.lede {
  font-family: var(--font-body);
  font-size: 1.15rem;
  line-height: 1.75;
  font-weight: 400;
  color: var(--fg-dim);
  text-wrap: pretty;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
}

.caption {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--fg-mute);
  line-height: 1.6;
}

.serif-accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

code, .code, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--accent);
  background: var(--accent-light);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
}

/* =============================================================
   Base reset (opt-in via .ds-base on body)
   ============================================================= */

.ds-base {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ds-base a {
  color: var(--fg);
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-out);
}
.ds-base a:hover { color: var(--accent); }

.ds-base ::selection { background: var(--accent); color: var(--bg); }
.ds-base :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

/* =============================================================
   Subtle grain overlay (apply via body::after when desired)
   ============================================================= */
.grain::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}