/* ═══════════════════════════════════════════════
   Bordo Bikes — Design Tokens
   Wyekstrahowane z obiektów T w komponentach React
   ═══════════════════════════════════════════════ */

:root {
  /* ── Brand colors ── */
  --bordo:        #8B1A30;
  --bordo-l:      #B02842;
  --bordo-bright: #D93B5C;
  --bordo-glow:   rgba(176, 40, 66, 0.38);

  /* ── Backgrounds ── */
  --bg:           #f5f2ef;
  --bg-card:      #ffffff;
  --bg-elevated:  #efecea;
  --bg-input:     #ffffff;

  /* ── Text ── */
  --text:         #111111;
  --text-dim:     rgba(0, 0, 0, 0.72);
  --text-muted:   rgba(0, 0, 0, 0.62);

  /* ── Borders ── */
  --border:       rgba(0, 0, 0, 0.08);
  --border-mid:   rgba(0, 0, 0, 0.12);
  --border-strong: rgba(0, 0, 0, 0.20);

  /* ── Nav / Footer ── */
  --nav-bg:       rgba(245, 242, 239, 0.92);
  --footer-bg:    #ede9e5;

  /* ── Typography ── */
  --font-display: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  /* ── Border radius ── */
  --r-sm:  10px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  20px;
  --r-2xl: 24px;

  /* ── Shadows ── */
  --shadow-card:   0 2px 16px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
  --shadow-hover:  0 20px 50px rgba(0,0,0,0.14);
  --shadow-modal:  0 32px 80px rgba(0,0,0,0.22);
  --shadow-bordo:  0 8px 28px var(--bordo-glow);
}