/* ============================================================
   KMUcare Design System — Colors & Typography
   Modern, natural, approachable IT MSP for Swiss SMBs.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ─── BRAND COLORS ─────────────────────────────────────── */
  --kmu-blue:        #2e9bda;   /* primary brand */
  --kmu-blue-600:    #2588c2;
  --kmu-blue-700:    #1f73a6;
  --kmu-blue-300:    #6cb8e3;   /* light tint — for accents on dark surfaces */
  --kmu-blue-100:    #e3f2fb;
  --kmu-blue-50:     #f3f9fd;

  --kmu-ink:         #1a1d21;   /* near-black headlines */
  --kmu-charcoal:    #333333;   /* secondary brand */
  --kmu-slate:       #5a6470;   /* body */
  --kmu-mute:        #8a939e;   /* meta / captions */

  /* Natural / Swiss alpine supporting palette (cool, fresh, modern) */
  --kmu-paper:       #f4f7f9;   /* cool paper background */
  --kmu-mist:        #e6eef3;   /* lifted surface */
  --kmu-fog:         #cfd9e0;   /* dividers / soft borders */
  --kmu-alpine:      #3d5a6a;   /* deep cool slate accent */

  /* Legacy aliases (kept for components that referenced them) */
  --kmu-sand:        var(--kmu-paper);
  --kmu-stone:       var(--kmu-mist);

  /* Surface */
  --kmu-bg:          #ffffff;
  --kmu-bg-alt:      #f4f7f9;   /* cool paper */
  --kmu-surface:     #ffffff;
  --kmu-line:        #e6eef3;   /* cool hairline */
  --kmu-line-strong: #cfd9e0;

  /* Semantic */
  --kmu-success:     #4f8a5a;
  --kmu-warn:        #c89638;
  --kmu-danger:      #c0533a;
  --kmu-info:        var(--kmu-blue);

  /* ─── FOREGROUND TOKENS ────────────────────────────────── */
  --fg-1: var(--kmu-ink);
  --fg-2: var(--kmu-charcoal);
  --fg-3: var(--kmu-slate);
  --fg-4: var(--kmu-mute);
  --fg-on-blue: #ffffff;
  --fg-link: var(--kmu-blue-700);

  /* ─── TYPE ─────────────────────────────────────────────── */
  --font-sans:    'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --font-display: 'Manrope', ui-sans-serif, system-ui, sans-serif;

  /* Type scale — modern, generous */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  44px;
  --text-4xl:  60px;
  --text-5xl:  80px;
  --text-6xl: 104px;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.55;
  --lh-loose: 1.7;

  --tracking-tight: -0.025em;
  --tracking-snug:  -0.01em;
  --tracking-wide:   0.04em;
  --tracking-cap:    0.12em;

  /* ─── SPACING (4px grid, then 8px from md up) ──────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10:128px;

  /* ─── RADII ────────────────────────────────────────────── */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ─── SHADOWS (soft, natural) ──────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(26, 29, 33, 0.04);
  --shadow-sm: 0 1px 3px rgba(26, 29, 33, 0.06), 0 1px 2px rgba(26, 29, 33, 0.04);
  --shadow-md: 0 4px 12px rgba(26, 29, 33, 0.06), 0 2px 4px rgba(26, 29, 33, 0.04);
  --shadow-lg: 0 12px 32px rgba(26, 29, 33, 0.08), 0 4px 8px rgba(26, 29, 33, 0.04);
  --shadow-blue: 0 12px 32px rgba(46, 155, 218, 0.18), 0 2px 4px rgba(46, 155, 218, 0.10);

  /* ─── MOTION ──────────────────────────────────────────── */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-base: 220ms;
  --duration-slow: 420ms;

  /* ─── LAYOUT ──────────────────────────────────────────── */
  --container-sm: 720px;
  --container-md: 960px;
  --container-lg: 1200px;
  --container-xl: 1360px;
}

/* ============================================================
   SEMANTIC TYPE — apply directly to elements
   ============================================================ */

.kmu-display {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, var(--text-6xl));
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.kmu-h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, var(--text-4xl));
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.kmu-h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, var(--text-3xl));
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}

.kmu-h3 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.kmu-h4 {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.kmu-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-cap);
  text-transform: uppercase;
  color: var(--kmu-blue-700);
}

.kmu-lead {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: var(--lh-base);
  color: var(--fg-2);
}

.kmu-body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--lh-base);
  color: var(--fg-3);
}

.kmu-small {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: var(--lh-base);
  color: var(--fg-3);
}

.kmu-meta {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-snug);
  color: var(--fg-4);
}

.kmu-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0;
}

/* ============================================================
   GLOBAL DEFAULTS (opt-in via .kmu-prose on a wrapper)
   ============================================================ */
.kmu-prose {
  font-family: var(--font-sans);
  color: var(--fg-3);
  line-height: var(--lh-base);
}
.kmu-prose h1 { @extend .kmu-h1; }
.kmu-prose h2 { @extend .kmu-h2; }
.kmu-prose p  { font-size: var(--text-base); margin: 0 0 var(--space-4); }
.kmu-prose a  { color: var(--fg-link); text-decoration: underline; text-underline-offset: 3px; }
.kmu-prose a:hover { color: var(--kmu-blue); }