:root {

  /* Colors */

  --color-bg: #ffffff;
  --color-surface: #111111;
  --color-surface-light: #1a1a1a;

  --color-white: #ffffff;
  --color-text: #000000;

  --color-accent: #c9a86a;

  --color-border: rgba(255,255,255,0.08);

  /* Layout */

  --container-width: 1280px;;
  --container-padding: 40px;

  /* Radius */

  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;

  /* Transition */

  --transition: 0.3s ease;

  /* Z-index */

  --z-header: 1000;
  --z-overlay: 50;
}

@media (max-width: 768px) {
  :root {
    --container-padding: 20px;
  }
}

@media (max-width: 480px) {
  :root {
    --container-padding: 16px;
  }
}