/* ============================================================
   Herr Rümpel — Design Tokens
   Foundations: color, type, spacing, radius, shadow, motion
   Primary direction: "Stuttgart Green" (premium pine green +
   warm sand neutrals + energetic amber accent)
   ------------------------------------------------------------
   Fonts (Google Fonts, open source — self-host for production):
   Schibsted Grotesk (display/headings), Hanken Grotesk (text)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700;800;900&family=Hanken+Grotesk:wght@300;400;500;600;700;800&family=Spline+Sans+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- Brand: Pine Green scale ---------- */
  --green-50:  #EEF6F1;
  --green-100: #D6EBE0;
  --green-200: #AED8C3;
  --green-300: #7FBFA1;
  --green-400: #4FA17C;
  --green-500: #2E8761;
  --green-600: #1E6E4F;   /* PRIMARY brand */
  --green-700: #175A41;
  --green-800: #134735;
  --green-900: #0E3528;

  /* ---------- Accent: Warm Amber ---------- */
  --amber-50:  #FDF4E5;
  --amber-100: #FBE6C4;
  --amber-300: #F6C677;
  --amber-400: #F4AE49;
  --amber-500: #F2A23C;   /* ACCENT */
  --amber-600: #E08A1E;
  --amber-700: #B96D14;

  /* ---------- Warm neutrals (sand / stone / ink) ---------- */
  --paper:     #F8F5EF;   /* page background */
  --surface:   #FFFFFF;   /* cards, panels */
  --stone-50:  #F4F1E9;
  --stone-100: #EDE8DD;
  --stone-200: #E0DACB;
  --stone-300: #CFC7B4;
  --stone-400: #ABA593;
  --ink:       #20211C;   /* primary text — warm near-black */
  --ink-soft:  #45473E;   /* strong secondary text */
  --muted:     #5F6155;   /* muted text */
  --faint:     #8A8B7E;   /* placeholder / disabled text */
  --line:      #E4DECF;   /* hairline borders on paper */
  --line-soft: #EFEAE0;   /* subtle dividers */

  /* ---------- Semantic ---------- */
  --success:     #1E6E4F;
  --success-bg:  #EAF4EE;
  --warning:     #B96D14;
  --warning-bg:  #FBEFD8;
  --danger:      #C0392B;
  --danger-bg:   #FBEAE7;
  --info:        #2C6E8F;
  --info-bg:     #E7F1F6;

  /* ---------- Role tokens (use these in components) ---------- */
  --bg:            var(--paper);
  --bg-elevated:   var(--surface);
  --fg:            var(--ink);
  --fg-secondary:  var(--ink-soft);
  --fg-muted:      var(--muted);
  --fg-on-brand:   #FFFFFF;
  --brand:         var(--green-600);
  --brand-hover:   var(--green-700);
  --brand-active:  var(--green-800);
  --brand-subtle:  var(--green-50);
  --accent:        var(--amber-500);
  --accent-hover:  var(--amber-600);
  --border:        var(--line);
  --border-strong: var(--stone-300);
  --focus-ring:    color-mix(in oklch, var(--green-600) 45%, transparent);

  /* ---------- Typefaces ---------- */
  --font-display: 'Schibsted Grotesk', system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, sans-serif;
  --font-mono:    'Spline Sans Mono', ui-monospace, monospace;

  /* ---------- Type scale (rem; 1rem = 16px) ---------- */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md:   1.125rem;  /* 18 */
  --text-lg:   1.375rem;  /* 22 */
  --text-xl:   1.75rem;   /* 28 */
  --text-2xl:  2.25rem;   /* 36 */
  --text-3xl:  3rem;      /* 48 */
  --text-4xl:  3.75rem;   /* 60 */
  --text-5xl:  4.75rem;   /* 76 */

  --leading-tight:   1.08;
  --leading-snug:    1.22;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

  /* ---------- Spacing (4px base) ---------- */
  --space-1:  0.25rem;   /* 4  */
  --space-2:  0.5rem;    /* 8  */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-7:  3rem;      /* 48 */
  --space-8:  4rem;      /* 64 */
  --space-9:  6rem;      /* 96 */
  --space-10: 8rem;      /* 128 */

  /* ---------- Radius ---------- */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* ---------- Shadows (warm-tinted, soft) ---------- */
  --shadow-xs:  0 1px 2px rgba(32, 33, 28, 0.06);
  --shadow-sm:  0 2px 6px rgba(32, 33, 28, 0.07), 0 1px 2px rgba(32, 33, 28, 0.05);
  --shadow-md:  0 8px 20px rgba(32, 33, 28, 0.09), 0 2px 6px rgba(32, 33, 28, 0.05);
  --shadow-lg:  0 18px 40px rgba(32, 33, 28, 0.12), 0 6px 14px rgba(32, 33, 28, 0.06);
  --shadow-brand: 0 12px 28px rgba(30, 110, 79, 0.28);
  --shadow-focus: 0 0 0 4px var(--focus-ring);

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;

  /* ---------- Layout ---------- */
  --container:    1200px;
  --container-sm: 760px;
}

/* ============================================================
   Semantic element defaults — opt in with class .me-type
   (kept off the bare element selectors so the tokens above
   can be reused without forcing global resets)
   ============================================================ */

.me-type {
  font-family: var(--font-body);
  color: var(--fg);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.me-display,
.me-h1, .me-h2, .me-h3, .me-h4 {
  font-family: var(--font-display);
  color: var(--fg);
  text-wrap: balance;
}

.me-display {
  font-size: clamp(2.75rem, 6vw, var(--text-5xl));
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.me-h1 {
  font-size: clamp(2.25rem, 4.5vw, var(--text-3xl));
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.me-h2 {
  font-size: clamp(1.75rem, 3vw, var(--text-2xl));
  font-weight: 700;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}
.me-h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}
.me-h4 {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-snug);
}
.me-lead {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary);
}
.me-body { font-size: var(--text-base); line-height: var(--leading-normal); }
.me-small { font-size: var(--text-sm); line-height: var(--leading-normal); }
.me-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--brand);
}
.me-mono { font-family: var(--font-mono); font-feature-settings: 'tnum' 1; }