/* ─────────────────────────────────────────────────────────────
   Stackschmiede — Colors & Type
   Extracted from: src/styles/global.css in 3motiBot/stackschmiede
   ───────────────────────────────────────────────────────────── */

/* Web fonts — self-hosted on prod, CDN here for prototyping.
   Inter Variable, JetBrains Mono Variable, Instrument Serif. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@100..800&display=swap");

:root {
  /* ── Brand palette — "Werkstatt-DE" (warm workshop) ──────── */
  --color-bg:           #0F0F10;   /* warmer Anthrazit — primary canvas */
  --color-surface:      #1A1A1C;   /* cards, bento tiles */
  --color-surface-2:    #222225;   /* hover, raised */
  --color-fg:           #EDEAE3;   /* warm off-white — primary text */
  --color-muted:        #8A8680;   /* secondary text, meta */
  --color-primary:      #D4A574;   /* Bernstein / amber — sparks, CTAs */
  --color-primary-soft: #E8C493;   /* hover for primary */
  --color-accent:       #6B8E7F;   /* Salbei / sage — secondary accent */
  --color-border:       #26262A;   /* hairlines */

  --color-success:      #7FB069;
  --color-live:         #7FB069;   /* live-in-production pulse */
  --color-warn:         #E0A96D;
  --color-danger:       #C97064;

  /* Semantic aliases ─────────────────────────────────────── */
  --fg-1:               var(--color-fg);
  --fg-2:               var(--color-muted);
  --fg-brand:           var(--color-primary);
  --bg-1:               var(--color-bg);
  --bg-2:               var(--color-surface);
  --bg-3:               var(--color-surface-2);
  --border-1:           var(--color-border);

  /* ── Typography families ──────────────────────────────────
     Primary: Inter — UI, headings, body (font-feature-settings: ss01, cv11)
     Display / quote: Instrument Serif — used italic for editorial pull-quotes
     Mono: JetBrains Mono — code, tags, eyebrow/meta labels (UPPERCASE, tracked) */
  --font-sans:    "Inter", "Inter Variable", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", "JetBrains Mono Variable", ui-monospace, "SF Mono", Menlo, monospace;
  --font-serif:   "Instrument Serif", Georgia, Cambria, "Times New Roman", serif;

  /* ── Type scale (modular, ~1.25) ─────────────────────────── */
  --text-xs:    0.78rem;   /* 12.5px — meta, tags */
  --text-sm:    0.875rem;  /* 14px   — caption, small UI */
  --text-base:  1rem;      /* 17px   — body (base set on html) */
  --text-lg:    1.125rem;  /* 19px   — lead */
  --text-xl:    1.3125rem; /* 22px   — h4 */
  --text-2xl:   1.65rem;   /* 28px   — h3 */
  --text-3xl:   2.1rem;    /* 36px   — h2 (mobile) */
  --text-4xl:   2.75rem;   /* 47px   — h2 */
  --text-5xl:   3.6rem;    /* 61px   — h1 */
  --text-6xl:   4.7rem;    /* 80px   — hero oversize */

  /* Heading metrics */
  --heading-weight: 640;         /* Inter variable, between semibold and bold */
  --heading-tracking: -0.02em;   /* tight negative tracking */
  --heading-leading: 1.12;
  --body-leading: 1.6;
  --prose-leading: 1.72;         /* reading comfort in MDX prose */

  /* ── Radii ───────────────────────────────────────────────── */
  --radius-sm:  6px;     /* pills, tags, inline code */
  --radius-md:  10px;    /* buttons, inputs */
  --radius-lg:  16px;    /* cards, bento tiles */
  --radius-xl:  24px;    /* marquee sections */

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-glow: 0 0 0 1px rgba(212,165,116,.3), 0 8px 32px -8px rgba(212,165,116,.25);

  /* ── Spacing (Tailwind-like, named where used) ───────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* ── Container widths ────────────────────────────────────── */
  --container-sm:  38rem;
  --container-md:  48rem;
  --container-lg:  64rem;
  --container-xl:  78rem;
  --container-2xl: 88rem;
  --container-wide: 110rem; /* site-wide max width */

  /* ── Motion ──────────────────────────────────────────────── */
  --ease-brand: cubic-bezier(.4, 0, .2, 1);
  --dur-fast:   150ms;
  --dur-base:   220ms;
  --dur-slow:   550ms;
}

/* ── Light theme override (opt-in via data-theme) ─────────── */
:root[data-theme="light"] {
  --color-bg:           #F5F2EC;   /* warm paper */
  --color-surface:      #FFFFFF;
  --color-surface-2:    #F0ECE3;
  --color-fg:           #1A1A1C;
  --color-muted:        #6B6560;
  --color-primary:      #B8864A;   /* darker amber for contrast on paper */
  --color-primary-soft: #C99A5B;
  --color-accent:       #4A7063;
  --color-border:       #D8D2C3;
}

/* ─────────────────────────────────────────────────────────────
   Base — applied to html/body by default.
   Reset is minimal — Stackschmiede runs on Tailwind preflight in prod.
   ───────────────────────────────────────────────────────────── */
html {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: 17px;              /* base bumped to 17 (was 16) per WORKNOTES */
  line-height: var(--body-leading);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  color-scheme: dark;
}
html[data-theme="light"] { color-scheme: light; }

body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-feature-settings: "ss01", "cv11"; /* Inter stylistic sets */
}

/* ─────────────────────────────────────────────────────────────
   Semantic text styles
   ───────────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  line-height: var(--heading-leading);
}
h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }

@media (max-width: 48rem) {
  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }
}
@media (max-width: 24rem) {
  h1 { font-size: var(--text-3xl); }
}

p { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--body-leading); }

.lead          { font-size: var(--text-lg); color: var(--color-fg); }
.meta, .caption{ font-size: var(--text-sm); color: var(--color-muted); }

/* Serif used sparingly — editorial pull-quotes, hero accents */
.display-serif { font-family: var(--font-serif); font-style: italic; letter-spacing: 0; font-weight: 400; }

/* Mono — used for tags, eyebrows, code, stat labels */
code, kbd, pre, samp, .mono { font-family: var(--font-mono); }

/* Eyebrow (pre-heading label) — UPPERCASE, tracked, muted, optional dash prefix */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}
.eyebrow-line::before {
  content: "";
  display: inline-block;
  width: 1.6rem;
  height: 1px;
  background: var(--color-primary);
  margin-right: 0.6rem;
  vertical-align: middle;
  opacity: .7;
}

/* Tag — small mono chip with bordered outline, used on stack chips */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  text-transform: uppercase;
}

/* Selection matches primary */
::selection { background: var(--color-primary); color: var(--color-bg); }

/* Focus ring — always primary, 2px, offset 3px */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,::before,::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}