/* ============================================================
   Design tokens — neutralna paleta narzędzia prezentacyjnego.
   Interfejs playgrounda ma nie konkurować z projektem aplikacji.
   ============================================================ */
:root {
  /* Surfaces */
  --c-canvas:        #f4f4f3;
  --c-surface:       #ffffff;
  --c-surface-sunk:  #fbfbfa;
  --c-surface-hover: #f7f7f6;

  /* Ink */
  --c-ink:           #16171a;
  --c-ink-soft:      #55575d;
  --c-ink-muted:     #8b8d94;
  --c-ink-faint:     #b6b8be;

  /* Lines */
  --c-line:          #e6e6e4;
  --c-line-strong:   #d5d5d2;

  /* Accent — celowo prawie-czarny, nie kolorowy */
  --c-accent:        #16171a;
  --c-accent-ink:    #ffffff;
  --c-focus:         #16171a;

  /* Placeholder (wireframe) */
  --c-ph-fill:       #e4e4e1;
  --c-ph-fill-soft:  #ececea;
  --c-ph-line:       #dcdcd9;

  /* Typografia */
  --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;

  --ls-wide:  0.14em;
  --ls-mid:   0.06em;
  --ls-tight: -0.01em;

  /* Spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* Elevation — bardzo subtelna */
  --sh-1: 0 1px 2px rgba(16, 17, 26, 0.04);
  --sh-2: 0 1px 3px rgba(16, 17, 26, 0.06), 0 8px 24px rgba(16, 17, 26, 0.05);
  --sh-phone: 0 2px 6px rgba(16, 17, 26, 0.06),
              0 24px 60px rgba(16, 17, 26, 0.10),
              0 60px 120px rgba(16, 17, 26, 0.06);

  /* Motion */
  --e-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 120ms;
  --t-mid:  200ms;
  --t-slow: 320ms;

  /* Layout */
  --h-header: 64px;
  --w-rail:   224px;
  --w-panel:  348px;
}