/* =====================================================================
   PRIMITIVES — surowe wartości Design System (warstwa 1/2)
   Źródło: chatmydoctor-designTokens.zip (Figma → W3C tokens)
   NIE używać bezpośrednio w komponentach. Używaj warstwy semantic.css.
   Regeneracja: tylko gdy zmienią się tokeny w Figmie.
   ===================================================================== */

:root {
  /* ---- COLOR · Brand (motyw Lekarz) ---- */
  --brand-100: #f6f8fb;
  --brand-200: #e7ebf6;
  --brand-300: #c8d3eb;
  --brand-400: #8da4d2;
  --brand-500: #6d89c1;
  --brand-600: #516ead;
  --brand-700: #3b5796;
  --brand-800: #2c4781;
  --brand-900: #1e3467;
  --brand-1000: #13254d;
  --brand-extra: #091533;

  /* ---- COLOR · Pacjent (motyw Pacjent — tu nieużywany, dla kompletu) ---- */
  --pacjent-100: #f0f6f4;
  --pacjent-200: #d9ebe6;
  --pacjent-300: #b3d8ce;
  --pacjent-400: #7dbfb2;
  --pacjent-500: #4ea396;
  --pacjent-600: #398b7f;
  --pacjent-700: #296a61;
  --pacjent-800: #1d504a;
  --pacjent-900: #133b37;
  --pacjent-1000: #0c2924;
  --pacjent-extra: #071a17;

  /* ---- COLOR · Black (alfa) ---- */
  --black-100: #0c0c0d0d;
  --black-200: #0c0c0d1a;
  --black-300: #0c0c0d33;
  --black-400: #0c0c0d66;
  --black-500: #0c0c0db2;
  --black-600: #0c0c0dcc;
  --black-700: #0c0c0dd9;
  --black-800: #0c0c0de5;
  --black-900: #0c0c0df2;
  --black-1000: #0c0c0d;

  /* ---- COLOR · White (alfa) ---- */
  --white-100: #ffffff0d;
  --white-200: #ffffff1a;
  --white-300: #ffffff33;
  --white-400: #ffffff66;
  --white-500: #ffffffb2;
  --white-600: #ffffffcc;
  --white-700: #ffffffd9;
  --white-800: #ffffffe5;
  --white-900: #fffffff2;
  --white-1000: #ffffff;

  /* ---- COLOR · Green (Positive) ---- */
  --green-100: #ebffee;
  --green-200: #cff7d3;
  --green-300: #aff4c6;
  --green-400: #85e0a3;
  --green-500: #14ae5c;
  --green-600: #009951;
  --green-700: #008043;
  --green-800: #02542d;
  --green-900: #024023;
  --green-1000: #062d1b;

  /* ---- COLOR · Gray ---- */
  --gray-100: #f5f5f5;
  --gray-200: #e6e6e6;
  --gray-300: #d9d9d9;
  --gray-400: #b3b3b3;
  --gray-500: #757575;
  --gray-600: #444444;
  --gray-700: #383838;
  --gray-800: #2c2c2c;
  --gray-900: #1e1e1e;
  --gray-1000: #111111;

  /* ---- COLOR · Red (Danger) ---- */
  --red-100: #fee9e7;
  --red-200: #fdd3d0;
  --red-300: #fcb3ad;
  --red-400: #f4776a;
  --red-500: #ec221f;
  --red-600: #c00f0c;
  --red-700: #900b09;
  --red-800: #690807;
  --red-900: #4d0b0a;
  --red-1000: #300603;

  /* ---- COLOR · Slate (Neutral) ---- */
  --slate-100: #f3f3f3;
  --slate-200: #e3e3e3;
  --slate-300: #cdcdcd;
  --slate-400: #b2b2b2;
  --slate-500: #949494;
  --slate-600: #767676;
  --slate-700: #5a5a5a;
  --slate-800: #434343;
  --slate-900: #303030;
  --slate-1000: #242424;

  /* ---- COLOR · Yellow (Warning) ---- */
  --yellow-100: #fffbeb;
  --yellow-200: #fff1c2;
  --yellow-300: #ffe8a3;
  --yellow-400: #e8b931;
  --yellow-500: #e5a000;
  --yellow-600: #bf6a02;
  --yellow-700: #975102;
  --yellow-800: #682d03;
  --yellow-900: #522504;
  --yellow-1000: #401b01;

  /* ---- COLOR · Blue (Focus / Info) ---- */
  --blue-100: #f1f6fd;
  --blue-200: #e1ebfa;
  --blue-300: #c0d4f5;
  --blue-400: #9ebef1;
  --blue-500: #3f81ea;
  --blue-600: #3271d7;
  --blue-700: #2a61ba;
  --blue-800: #224a8a;
  --blue-900: #183057;
  --blue-1000: #15253f;

  /* ---- TYPOGRAPHY · rodziny ---- */
  --font-sans: 'DM Sans', system-ui, sans-serif;
  --font-serif: 'Noto Serif', Georgia, 'Times New Roman', serif;
  --font-mono: 'Roboto Mono', ui-monospace, monospace;

  /* ---- TYPOGRAPHY · skala rozmiarów ---- */
  --scale-01: 12px;
  --scale-02: 14px;
  --scale-03: 16px;
  --scale-04: 20px;
  --scale-05: 24px;
  --scale-06: 32px;
  --scale-07: 40px;
  --scale-08: 48px;
  --scale-09: 64px;
  --scale-10: 72px;

  /* ---- TYPOGRAPHY · wagi ---- */
  --weight-thin: 100;
  --weight-extralight: 200;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;

  /* ---- SPACING (Space) ---- */
  --space-0: 0px;
  --space-050: 2px;
  --space-100: 4px;
  --space-150: 6px;
  --space-200: 8px;
  --space-300: 12px;
  --space-400: 16px;
  --space-600: 24px;
  --space-800: 32px;
  --space-1200: 48px;
  --space-1600: 64px;
  --space-2400: 96px;
  --space-4000: 160px;
  --space-negative-100: -4px;
  --space-negative-200: -8px;
  --space-negative-300: -12px;
  --space-negative-400: -16px;
  --space-negative-600: -24px;

  /* ---- RADIUS ---- */
  --radius-100: 4px;
  --radius-200: 8px;
  --radius-300: 12px;
  --radius-400: 16px;
  --radius-500: 20px;
  --radius-600: 24px;
  --radius-700: 28px;
  --radius-800: 32px;
  --radius-900: 40px;
  --radius-full: 9999px;

  /* ---- STROKE ---- */
  --stroke-border: 1px;
  --stroke-focus-ring: 3px;

  /* ---- BLUR ---- */
  --blur-100: 4px;

  /* ---- DEPTH (offsety/blur dla cieni) ---- */
  --depth-0: 0px;
  --depth-025: 1px;
  --depth-100: 4px;
  --depth-200: 8px;
  --depth-400: 16px;
  --depth-800: 32px;
  --depth-1200: 48px;
  --depth-negative-025: -1px;
  --depth-negative-100: -4px;
  --depth-negative-200: -8px;
  --depth-negative-400: -16px;
  --depth-negative-800: -32px;
  --depth-negative-1200: -48px;

  /* ---- CIENIE (effect styles, złożone z Depth + Black) ---- */
  --shadow-100: 0 var(--depth-025) var(--depth-100) var(--depth-0) var(--black-100);
  --shadow-200: 0 var(--depth-025) var(--depth-100) var(--depth-0) var(--black-100),
                0 var(--depth-025) var(--depth-100) var(--depth-0) var(--black-200);
  --shadow-300: 0 var(--depth-100) var(--depth-100) var(--depth-negative-025) var(--black-100),
                0 var(--depth-100) var(--depth-100) var(--depth-negative-025) var(--black-200);
  --shadow-400: 0 var(--depth-100) var(--depth-100) var(--depth-negative-100) var(--black-100),
                0 var(--depth-400) var(--depth-800) var(--depth-negative-100) var(--black-200);
  --shadow-500: 0 var(--depth-100) var(--depth-100) var(--depth-negative-100) var(--black-100),
                0 var(--depth-400) var(--depth-400) var(--depth-negative-200) var(--black-200);
  --shadow-600: 0 var(--depth-400) var(--depth-800) var(--depth-negative-200) var(--black-400);
  --shadow-active: 0 0 0 var(--space-050) #3271d740;

  /* ---- BREAKPOINTY (Responsive) ---- */
  --bp-mobile: 375px;
  --bp-tablet: 768px;
  --bp-desktop: 1200px;
}