/* Design Tokens extracted from Figma */
:root {
  /* Colors */
  --color-primary: #A68763;
  --color-secondary: #D7C9AE;
  --color-white: #FFFFFF;
  --color-black: #2D2D2D;
  --color-dark-background: #232323;
  --color-success: #14AE5C;
  --color-divider: #F5F5F5;
  --color-background: #F5F5F5;

  /* Typography */
  --font-family-primary: 'Givonic', sans-serif;
  
  --font-size-xs: 14px;
  --font-size-sm: 16px;
  --font-size-base: 18px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  
  --font-weight-regular: 450;
  --font-weight-bold: 750;
  --font-weight-black: 900;
  
  --line-height-tight: 1.0;
  --line-height-normal: 1.1;
  --line-height-relaxed: 1.3;

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 75px;
  --spacing-4xl: 80px;
  --spacing-5xl: 96px;

  /* Border Radius */
  --border-radius-none: 0px;
  --border-radius-full: 100px;

  /* Shadows */
  --shadow-sm: 4px 7px 12px rgba(32, 32, 32, 0.4);

  /* Layout */
  --container-max-width: 1440px;
  --container-padding: 80px;
  
  /* Common Container - Your suggested approach */
  --common-container-max-width: 1310px;
  --common-container-padding: 15px;

  /* Component Specific */
  --button-padding-x: 24px;
  --button-padding-y: 12px;
  --button-border-radius: 100px;
  
  --navigation-item-spacing: 48px;
}

/* Utility Classes */
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-white { color: var(--color-white); }
.text-black { color: var(--color-black); }
.text-success { color: var(--color-success); }

.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-white { background-color: var(--color-white); }
.bg-black { background-color: var(--color-black); }
.bg-dark { background-color: var(--color-dark-background); }
.bg-success { background-color: var(--color-success); }

.font-primary { font-family: var(--font-family-primary); }

.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }

.font-regular { font-weight: var(--font-weight-regular); }
.font-bold { font-weight: var(--font-weight-bold); }
.font-black { font-weight: var(--font-weight-black); }

.leading-tight { line-height: var(--line-height-tight); }
.leading-normal { line-height: var(--line-height-normal); }
.leading-relaxed { line-height: var(--line-height-relaxed); }

.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }

.m-xs { margin: var(--spacing-xs); }
.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }
.m-xl { margin: var(--spacing-xl); }

.rounded-none { border-radius: var(--border-radius-none); }
.rounded-full { border-radius: var(--border-radius-full); }

.shadow-sm { box-shadow: var(--shadow-sm); }

.container {
  max-width: var(--container-max-width);
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
  margin: 0 auto;
}

/* Common Container Class - Standardized approach */
.common-container {
  max-width: var(--common-container-max-width);
  padding-left: var(--common-container-padding);
  padding-right: var(--common-container-padding);
  margin: 0 auto;
  width: 100%;
}