/* Design tokens - global CSS variables */
:root {
  /* LAYOUT VARIABLES */
  --layout-navbar-height: 64px;
  --layout-sidebar-width: clamp(220px, 18vw, 280px); 
  --layout-mobile-nav-height: 70px;

  /* COLOR VARIABLES */
  --color-primary: #FFD006;
  --color-background: #FAFAFA;
  --color-text: #111111;
  --color-text-secondary: #656565;
  --color-containers: #FFFFFF;
  --color-buttons: #FFFFFF;
  --color-badgenumbers: #E68600;
  --color-category-active: #111111;
  --color-category-bg: #F0F0F0;

  /* FONT VARIABLES */
  --font-family-primary: 'Roboto', sans-serif;
  --font-size-xs: 0.75rem;  /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-r: 1rem;      /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.5rem;   /* 24px */

  --font-weight-r: 400;
  --font-weight-semi: 600;
  --font-weight-bold: 700;

  /* BORDER RADIUS VARIABLES */
  --border-radius-sm: 8px;  /* Inputs */
  --border-radius-r: 12px;  /* Containers */
  --border-radius-cart-btn: 72px; /* Floating cart button */

  /* BOX SHADOW VARIABLES */
  --box-shadow-containers: 0px 1px 7px 1px rgba(0, 0, 0, 0.15);
  --box-shadow-buttons: 0px 2px 6px 2px rgba(0, 0, 0, 0.15);

  /* LINE HEIGHT VARIABLES */
  --line-height-tight: 1.1;
  --line-height-normal: 1.4;
  --line-height-relaxed: 1.6;
}