/* receptionOS design system — tokeny skopiowane 1:1 z projektu Claude Design
   (_ds/receptionos-design-system-826e7ef0…/tokens/*). Nie zmieniać wartości —
   to jest kontrakt wizualny marki, nie miejsce na własne odcienie. */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600&family=Inter:wght@300;400;500&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Canvas + text */
  --black: #050505;
  --ink: #050403;
  --cream: #F6F4EF;
  /* The only accent */
  --orange: #EB670F;
  /* Greys */
  --grey-900: #333333;
  --grey-600: #666666;
  --grey-400: #999999;
  --grey-200: #DDDDDD;
  --grey-100: #EEEEEE;
  --grey-050: #F8F8F8;
  /* Hairlines */
  --hairline-light: #DDDDDD;
  --hairline-dark: rgba(255, 255, 255, 0.12);
  /* Semantic aliases */
  --surface-dark: var(--black);
  --surface-light: var(--cream);
  --text-on-dark: #F6F4EF;
  --text-on-dark-muted: rgba(246, 244, 239, 0.62);
  --text-on-light: var(--ink);
  --text-on-light-muted: var(--grey-600);
  --accent: var(--orange);

  --font-display: 'Inter Tight', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --fs-kicker: 12px;
  --fs-footnote: 11px;
  --display-tracking: -0.02em;
  --kicker-tracking: 0.12em;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-5: 40px;
  --space-8: 64px;
  --radius-pill: 999px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --border-hairline: 1px;
  --ease-entry: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-entry: 400ms;
}