/* ============================================================
   Synapka — Colors & Type tokens
   v1.0 · May 2026
   Source of truth: SynApka Logo & UI manuál v2.0 + Design System v1.0
   ============================================================ */

/* Fonts — JetBrains Mono via Google Fonts.
   Helvetica is the licensed brand font; install locally or ship
   web-licensed Helvetica Neue. Arial is the documented fallback. */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;600&display=swap');

:root {
  /* ────────── COLORS ────────── */

  /* PRIMARY — Slate Indigo (9-step) */
  --indigo-50:  #F1F2FC;
  --indigo-100: #E2E4F8;
  --indigo-200: #C7CAEE;
  --indigo-300: #ABAEEC;
  --indigo-400: #8388DE;
  --indigo-500: #6064D2; /* brand */
  --indigo-600: #4F53C2;
  --indigo-700: #3F42A8;
  --indigo-800: #2E3186;
  --indigo-900: #1F2168;

  /* INK & PLOCHA — base surfaces */
  --white:       #FFFFFF;
  --paper:       #FAFAFB;
  --line:        #EEEEF2;
  --ink:         #0E1020;
  --ink-2:       #181B3E;
  --ink-muted:   #5A5E78;

  /* ACCENT — Cyan (Trust / Live) */
  --cyan-50:  #E1F0EE;
  --cyan-100: #C7E5E0;
  --cyan-200: #A4D6CE;
  --cyan-300: #71BEB2;
  --cyan-400: #45A99C;
  --cyan-500: #249489;
  --cyan-600: #1A7A71;
  --cyan-700: #15625B;

  /* ACCENT — Chocolate (Deadline / Warm) */
  --chocolate-50:  #FBE9D8;
  --chocolate-100: #F7D4B5;
  --chocolate-200: #F1B98C;
  --chocolate-300: #E89E63;
  --chocolate-400: #DE8542;
  --chocolate-500: #D97430;
  --chocolate-600: #BB5F22;
  --chocolate-700: #964B1B;

  /* ACCENT — Scarlet (Alert / Urgent) */
  --scarlet-50:  #FBDBD2;
  --scarlet-100: #F7B9A8;
  --scarlet-200: #F08F76;
  --scarlet-300: #ED6840;
  --scarlet-400: #E94B1F;
  --scarlet-500: #E7390D;
  --scarlet-600: #C42C07;
  --scarlet-700: #9A2305;

  /* SURFACE — Mint (Positive / AI shoda) */
  --mint-50:  #EEF8EE;
  --mint-100: #DCEEDC;
  --mint-200: #C1E0C5;
  --mint-300: #A0D2AC;
  --mint-400: #7BC09E;
  --mint-500: #58A484;
  --mint-600: #3F8262;
  --mint-700: #2D6447;

  /* SURFACE — Peach (Warm / Event) */
  --peach-50:  #FEF4E8;
  --peach-100: #FCEAD6;
  --peach-200: #F8D9B8;
  --peach-300: #F3C49B;
  --peach-400: #EBAA7A;
  --peach-500: #DE8E5C;
  --peach-600: #BD7245;
  --peach-700: #98583A;

  /* SURFACE — Lavender (Event / Komunita) */
  --lavender-50:  #F0ECF9;
  --lavender-100: #E8E3F5;
  --lavender-200: #D5CDEC;
  --lavender-300: #B5A8DC;
  --lavender-400: #9587C8;
  --lavender-500: #7568AE;
  --lavender-600: #5C4FA6;
  --lavender-700: #473C82;

  /* SURFACE — Sky (Info) */
  --sky-50:  #ECF3FA;
  --sky-100: #DDEAF6;
  --sky-200: #BBD3EC;
  --sky-300: #8FB3D8;
  --sky-400: #6593C2;
  --sky-500: #4376A8;
  --sky-600: #345E88;
  --sky-700: #274768;

  /* SURFACE — Butter (Data) */
  --butter-50:  #FDF8E2;
  --butter-100: #FBF1D0;
  --butter-200: #F6E6A8;
  --butter-300: #EFD583;
  --butter-400: #E8C766;
  --butter-500: #D4AE43;
  --butter-600: #A98A2E;
  --butter-700: #806722;

  /* SURFACE — Rose (Human / Profile) */
  --rose-50:  #FBE8E0;
  --rose-100: #F7DCD3;
  --rose-200: #F0C5B5;
  --rose-300: #E5A992;
  --rose-400: #D78E73;
  --rose-500: #C57254;
  --rose-600: #9F583F;
  --rose-700: #794230;

  /* SYNAPSE GLOW — brand only, NEVER product UI */
  --glow-cyan:   #5BC6FF;
  --glow-violet: #6D5AD8;
  --glow-pink:   #E37FAA;
  --glow-coral:  #FF6B4A;
  --glow-warm:   #FFC97A;
  --glow-navy:   #181B3E;
  --glow-night:  #0E1130;
  --glow-deep:   #05071A;

  /* ────────── SEMANTIC ────────── */
  --bg:          var(--white);
  --bg-subtle:   var(--paper);
  --bg-wash:     var(--indigo-50);
  --fg:          var(--ink);
  --fg-2:        var(--ink-muted);
  --fg-on-brand: var(--white);
  --border:      var(--line);
  --border-strong: var(--indigo-100);

  --brand:       var(--indigo-500);
  --brand-hover: var(--indigo-600);
  --brand-active:var(--indigo-700);
  --brand-soft:  var(--indigo-50);

  --success:     var(--cyan-500);
  --success-soft:var(--mint-50);
  --warn:        var(--chocolate-500);
  --warn-soft:   var(--peach-50);
  --danger:      var(--scarlet-500);
  --danger-soft: var(--scarlet-50);
  --info:        var(--sky-500);
  --info-soft:   var(--sky-50);

  /* ────────── TYPE FAMILIES ────────── */
  --font-sans: 'Helvetica Neue', Helvetica, 'Inter', Arial, sans-serif;
  --font-display: 'Helvetica Neue', Helvetica, 'Inter', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Per-role type tokens — from § 06 Typografie */
  --display-size: 64px;  --display-lh: 0.95; --display-track: -0.04em;
  --h1-size:      44px;  --h1-lh:      1.05; --h1-track:      -0.03em;
  --h2-size:      30px;  --h2-lh:      1.15; --h2-track:      -0.02em;
  --h3-size:      22px;  --h3-lh:      1.25; --h3-track:      -0.015em;
  --bodyL-size:   18px;  --bodyL-lh:   1.5;  --bodyL-track:   0;
  --body-size:    15px;  --body-lh:    1.55; --body-track:    0;
  --label-size:   13px;  --label-lh:   1.4;  --label-track:   0.14em;

  /* ────────── SPACING ────────── */
  --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;

  /* ────────── RADIUS ────────── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   22px;
  --radius-2xl:  28px;
  --radius-pill: 999px;
  --radius-logo: 22%;

  /* ────────── ELEVATION (e0–e4) ────────── */
  --e0: none;
  --e1: 0 1px 2px rgba(14,16,32,0.04);
  --e2: 0 2px 6px -1px rgba(14,16,32,0.06), 0 1px 2px rgba(14,16,32,0.04);
  --e3: 0 12px 24px -10px rgba(14,16,32,0.08), 0 2px 4px rgba(14,16,32,0.04);
  --e4: 0 24px 50px -20px rgba(14,16,32,0.12), 0 4px 8px rgba(14,16,32,0.04);
  --glass-shadow: 0 24px 50px -20px rgba(14,16,32,0.08);

  /* ────────── MOTION ────────── */
  --ease-quick:    cubic-bezier(0.4, 0, 1, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-smooth:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-quick:    120ms;
  --dur-standard: 220ms;
  --dur-smooth:   320ms;
  --dur-bounce:   420ms;
}

/* ============================================================
   Base + Semantic typography
   ============================================================ */
html, body {
  font-family: var(--font-sans);
  color: var(--fg);
  background: var(--bg);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--display-size);
  line-height: var(--display-lh);
  letter-spacing: var(--display-track);
}
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h1-size);
  line-height: var(--h1-lh);
  letter-spacing: var(--h1-track);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
  letter-spacing: var(--h2-track);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--h3-size);
  line-height: var(--h3-lh);
  letter-spacing: var(--h3-track);
  margin: 0;
}
.body-l, p.body-l {
  font-size: var(--bodyL-size);
  line-height: var(--bodyL-lh);
  letter-spacing: var(--bodyL-track);
  font-weight: 400;
}
p, .body {
  font-size: var(--body-size);
  line-height: var(--body-lh);
  letter-spacing: var(--body-track);
  font-weight: 400;
  margin: 0;
}
.label, label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--label-size);
  line-height: var(--label-lh);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
}
code, kbd, .mono {
  font-family: var(--font-mono);
  font-weight: 500;
}

/* Italic accent — "apka" gesture */
.italic-accent { font-style: italic; color: var(--brand); }