/* ============================================================
   MedCheck — Colors & Typography Tokens
   Source: Figma file "med-localfile.fig" (Panel główny + Historia)
   ============================================================ */

:root {
  /* ---------- Brand ---------- */
  --brand-red:          #E30613;   /* logo shield + error accent */
  --brand-red-dark:     #B10510;
  --brand-red-tint:     #FEE8EA;
  --brand-navy:         #123288;   /* primary brand text (MedCheck wordmark) */
  --brand-navy-deep:    #0B235F;
  --brand-blue:         #1F5592;   /* active nav, buttons, pagination pill */
  --brand-blue-hover:   #174677;

  /* ---------- Navy / ink (text, headings) ---------- */
  --ink-900:            #232323;   /* body emphasis */
  --ink-800:            #343C6A;   /* section titles (Panel główny / headings) */
  --ink-700:            #4F4F4F;
  --ink-600:            #64748B;   /* meta text */
  --ink-500:            #718EBF;   /* labels, sidebar inactive text, chart axes */
  --ink-400:            #8BA3CB;   /* placeholder */
  --ink-300:            #94A3B8;   /* muted nav text */
  --ink-200:            #B1B1B1;   /* disabled nav */

  /* ---------- Surfaces ---------- */
  --bg-app:             #F5F7FA;   /* main app backdrop */
  --bg-surface:         #FFFFFF;   /* cards, top nav */
  --bg-muted:           #F3F3F5;
  --bg-subtle:          #F2F4F7;
  --bg-highlight:       #E6EFF5;   /* pale blue background tint */

  /* ---------- Borders / dividers ---------- */
  --border-soft:        #E6EFF5;
  --border-softer:      #EBEEF2;
  --border-pale:        #DFE5EE;
  --border-paler:       #DFEAF2;

  /* ---------- Semantic / status ---------- */
  --success-700:        #065F46;   /* OK shield */
  --success-500:        #41D4A8;   /* positive delta, teal accent */
  --success-tint:       #DCFAF8;
  --success-check:      #0FB98A;

  --warning-700:        #B45309;   /* warn shield (question mark) */
  --warning-500:        #FFBB38;   /* pie slice */
  --warning-tint:       #FFF5D9;

  --danger-700:         #E30613;   /* red shield + negative delta */
  --danger-500:         #FF4B4A;
  --danger-tint:        #FEE8EA;

  --info-500:           #396AFF;   /* paypal circle icon */
  --info-tint:          #E7EDFF;

  /* ---------- Data viz (chart palette) ---------- */
  --viz-navy:           #343C6A;
  --viz-indigo:         #1814F3;
  --viz-blue:           #2D60FF;
  --viz-teal:           #16DBCC;
  --viz-pink:           #FF82AC;
  --viz-magenta:        #FC00FF;
  --viz-orange:         #FC7900;

  /* ---------- Radii ---------- */
  --radius-xs:          6px;
  --radius-sm:          10px;
  --radius-md:          12px;
  --radius-lg:          15px;
  --radius-xl:          25px;   /* card radius used everywhere */
  --radius-pill:        50px;   /* outline buttons, search */
  --radius-full:        9999px;

  /* ---------- Shadows ---------- */
  --shadow-card:        0 1px 2px rgba(231, 228, 232, 0.8);
  --shadow-float:       0 4px 14px rgba(52, 60, 106, 0.08);
  --shadow-popover:     0 12px 32px rgba(52, 60, 106, 0.14);

  /* ---------- Spacing scale ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ---------- Typography ---------- */
  --font-sans:    "Inter", system-ui, -apple-system, sans-serif;
  --font-display: "Poppins", "Inter", sans-serif;
  --font-alt:     "Lato", "Inter", sans-serif;
}