/* ============================================================
   SYMBICS — Design Tokens
   Eine Marke der Webbics GmbH & Co. KG
   ============================================================ */

:root {
  /* ---- Brand ---- */
  --sym-ink:        #0E1217; /* Symbics Ink — primary dark, base of the brand */
  --sym-mint:       #14E0A0; /* Signal-Mint — the single brand accent */
  --sym-mint-deep:  #03A57A; /* accessible mint for text/icons on light */
  --sym-mint-soft:  #E1FAF0; /* mint tint for surfaces/badges on light */
  --sym-mint-glow:  rgba(20,224,160,0.16); /* focus rings, ambient */

  /* ---- Neutrals — cool graphite ramp ---- */
  --n-paper: #FBFCFB;
  --n-50:    #F2F4F2;
  --n-100:   #E6E9E6;
  --n-200:   #D2D7D3;
  --n-300:   #AEB5B0;
  --n-400:   #828B85;
  --n-500:   #5A625C;
  --n-600:   #3B423D;
  --n-700:   #262B27;
  --n-800:   #171B18;
  --n-900:   #0E1217;

  /* ---- Semantic (kept distinct from brand mint) ---- */
  --s-success: #1FA86C;
  --s-success-soft: #E2F5EC;
  --s-warning: #E2982A;
  --s-warning-soft: #FBF0DC;
  --s-info:    #3F86C9;
  --s-info-soft: #E5F0FA;
  --s-error:   #DB4B47;
  --s-error-soft: #FBE6E5;

  /* ---- Surfaces (light theme default) ---- */
  --bg:        var(--n-paper);
  --bg-sunk:   var(--n-50);
  --surface:   #FFFFFF;
  --border:    var(--n-100);
  --border-strong: var(--n-200);
  --text:      var(--n-900);
  --text-soft: var(--n-500);
  --text-mute: var(--n-400);

  /* ---- Type ---- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Type scale — 1.25 ish, engineered */
  --t-display: clamp(2.75rem, 1.6rem + 5.7vw, 5rem);   /* 44 → 80 */
  --t-h1: clamp(2.25rem, 1.6rem + 3.2vw, 3.25rem);     /* 36 → 52 */
  --t-h2: 2rem;       /* 32 */
  --t-h3: 1.5rem;     /* 24 */
  --t-h4: 1.25rem;    /* 20 */
  --t-body-lg: 1.125rem; /* 18 */
  --t-body: 1rem;        /* 16 */
  --t-sm: 0.875rem;      /* 14 */
  --t-cap: 0.75rem;      /* 12 */

  --lh-tight: 1.04;
  --lh-snug: 1.18;
  --lh-body: 1.6;

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

  /* ---- Radii (small, engineered) ---- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* ---- Elevation — borders-first, faint shadows ---- */
  --shadow-sm: 0 1px 2px rgba(14,18,23,0.06);
  --shadow-md: 0 6px 24px -8px rgba(14,18,23,0.14);
  --shadow-lg: 0 24px 60px -20px rgba(14,18,23,0.28);

  --maxw: 1180px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Dark surface context (used inside .on-dark blocks) */
.on-dark {
  --bg:        var(--n-900);
  --bg-sunk:   #0A0D11;
  --surface:   var(--n-800);
  --border:    rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.18);
  --text:      #F4F6F4;
  --text-soft: #AEB5B0;
  --text-mute: #828B85;
}

/* ============================================================
   Reset & base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 600; line-height: var(--lh-snug); letter-spacing: -0.02em; color: var(--text); text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }

/* ---- Helpers ---- */
.mono { font-family: var(--font-mono); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-cap);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sym-mint-deep);
  font-weight: 500;
}
.on-dark .eyebrow { color: var(--sym-mint); }
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--sp-5); }