:root {
  /* Core */
  --hdh-black: #0A0A0A;
  --hdh-white: #FAFAF8;

  /* Ember Red */
  --hdh-ember: #C4391D;
  --hdh-ember-light: #E05A3A;
  --hdh-ember-dark: #9E2E17;

  /* Metálicos */
  --hdh-steel: #3A3D42;
  --hdh-steel-mid: #6B7075;
  --hdh-silver: #B8BCC2;

  /* Neutros cálidos */
  --hdh-bone: #F0EDE8;
  --hdh-clay: #E2DED7;

  /* Tipografía */
  --font-display: 'Outfit', sans-serif;
  --font-body: 'DM Sans', sans-serif;

  /* Espaciado */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* Layout */
  --container-max: 1100px;
  --container-padding: 24px;

  /* Componentes */
  --radius: 12px;
  --radius-full: 999px;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 768px) {
  :root {
    --container-padding: 40px;
  }
}