:root {
  /* Typography */
  --font-family-primary: 'texgyreadventorregular', 'Trebuchet MS', sans-serif;

  /* Colors */
  --color-text: #000000;
  --color-bg: #ffffff;
  --color-text-light: #666666;
  --color-border: #e0e0e0;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;

  /* Layout */
  --layout-width-desktop: 355px;
  --layout-width-mobile: 90%;
  --layout-offset-desktop: 5%;

  /* Transitions */
  --transition-speed-fast: 150ms;
  --transition-speed-normal: 300ms;
  --transition-speed-slide: 500ms;
  --transition-easing: ease-in-out;

  /* Z-index */
  --z-background: 0;
  --z-content: 10;
  --z-header: 20;

  /* Border radius */
  --border-radius: 0;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

  /* Animation */
  --fade-duration: 1000ms;
  --slide-duration: 500ms;
}

/* Mobile-first breakpoints */
@media (max-width: 399px) {
  :root {
    --font-size-base: 14px;
  }
}

@media (min-width: 400px) {
  :root {
    --font-size-base: 16px;
  }
}